Adding new options to multiple select elements issue
<p>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</p>

<pre><code>function fillUpSelects2(start, top, who) {
var optionArray = new Array();
// create the new options
for (var i = 1; i &lt;= top; i++) {
    optionArray.push(new Option(i, i));
}
</code></pre>

<p>// get all the select elements</p>

<pre><code>var selects = jQuery("select.estanciaselect");
</code></pre>

<p>// loop through the selects to change their content</p>

<pre><code>for (var i = 0; i &lt; selects.length; i++) {
</code></pre>

<p>// if selects[i] is not the one who triggered the change event</p>

<pre><code>if (selects[i].getAttribute('id') != who) {
</code></pre>

<p>// then I erase all its options</p>

<pre><code>selects[i].options.length = 0;
</code></pre>

<p>//and here is where it is supposed to add the new options</p>

<pre><code>for (var j = 0; j &lt; optionArray.length; j++) {
   selects[i].options[selects[i].options.length] = optionArray[j];
 }
</code></pre>

<p>}
 }</p>

<p>}</p>

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