1 Replies - 879 Views - Last Post: 28 September 2012 - 08:25 AM

Adding new options to multiple select elements

Posted 28 September 2012 - 07:46 AM

Hi there. I have a form where users can pick several locations they want to stay at and they have to specify the time they are going to be at each location but first, they have to enter how many days in general they are going to be at every location, for instance, if I want to be at two locations 2 days at the first one and 3 at the second one, I have to enter 5 days first and then pick the locations I want to stay at specifying for each location how many days I want to be there.
Well the thing is that to prevent the user to enter a wrong number of days for a location I created a select elemento for each location so when the user enters the general number of days I fill up the select elements with that information (options from 1 to day number), that is working just fine, but when the user picks a location and especify a day amount for that location I want the rest of the select elements to be filled with the ramaining days, so I use this code to do that

function fillUpSelects2(start, top, who) {
var optionArray = new Array();
// create the new options
for (var i = 1; i <= top; i++) {
optionArray.push(new Option(i, i));
}
// get all the select elements
var selects = jQuery("select.estanciaselect");
// loop through the selects to change their content
for (var i = 0; i < selects.length; i++) {
// if selects[i] is not the one who triggered the change event
if (selects[i].getAttribute('id') != who) {
// then I erase all its options
selects[i].options.length = 0;
//and here is where it is supposed to add the new options
for (var j = 0; j < optionArray.length; j++) {
selects[i].options[selects[i].options.length] = optionArray[j];
}
}
}
}

well when I run this all the selects end up empty but the last one which gets filled up properlly