Autoform meteor dependable/cascading selects - select

Question

how can I implement 3 dependent selects with autoform in meteor?
Here is an example of what I need to achieve http://www.ajaxray.com/Examples/depend.html
Thanks in advance for any help

Answer 1

You could add an event listener to your select and when it changes, update the select helper for the next select (or all select's) you have in your form. It would be something similar to the following example, but update the "options" object depending on what was selected by a different select input.
http://autoform.meteor.com/select

Answer 2

This is the way I solved it. However for the third select to return the selected value once the first select is updated I had to use JQuery. This might help to someone in need of something similar. But if there is a better way to do it please let me know.
Organizaciones = new Mongo.Collection('organizaciones');
Organizaciones.attachSchema(new SimpleSchema({
provincia: {
type: String,
label: 'Provincia',
autoform: {
type: 'select',
firstOption: '',
options: function () {
return DPA.find({grupo: 'Provincia'}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
},
canton: {
type: String,
label: 'Cantón',
autoform: {
type: 'select',
firstOption: '',
options: function () {
var codigoProvincia = AutoForm.getFieldValue('provincia');
var cantones = new RegExp('^' + codigoProvincia + '[\d]{2}$');
return DPA.find({codigo: {$regex: cantones}}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
},
parroquia: {
type: String,
label: 'Parroquia',
autoform: {
type: 'select',
firstOption: '',
options: function () {
$('#provincia').change(function() {
$('#parroquia option[value!=""]').remove();
});
var codigoCanton = AutoForm.getFieldValue('canton');
var parroquias = new RegExp('^' + codigoCanton + '[\d]{2}$');
return DPA.find({codigo: {$regex: parroquias}}).map(function (dpa) {
return {label: dpa.descripcion, value: dpa.codigo};
});
}
}
}
}));