Javascript arrays - populating select lists 1

[LTeeple]

Hi all,

My goal is to populate a javascript array from PHP/Mysql (done - working fine). From this javascript array, I wish to populate 2 select lists (using an onChange event).

It seems that when I'm looping through the array, once a condition is met, it exists the looping structure (for) instead of moving to the next element of the array.

Relevant Javascript code:

function populateNext(myform,mytime,myfield) {
  var field_name = myfield;
  var myindex = myform.elements[field_name].selectedIndex;
  var time_array = new Array(4);
  time_array[1] = "12:15pm (lunch served)";
  time_array[2] = "10:00am";
  time_array[3] = "7:00pm";
  time_array[4] = "5:30pm";
  switch(field_name){ 
    case 'time1': 
      myform.elements['time2'].options.length = 0; 
      myform.elements["time2"].options[0] = new Option("Choose a time: ",0);
      myform.elements['time3'].options.length = 0; 
      myform.elements["time3"].options[0] = new Option("Choose a time: ",0);
      myform.elements['time1_value'].value = myform.elements['time1'].options[myindex].value; 
      for (i=1;i<time_array.length;i++){ 
        if (myform.elements['time1_value'].value != time_array[i]){ 
          myform.elements['time2'].options[i] = new Option(time_array[i],i); 
        } 
      } 
      break; 
    case 'time2': 
      break; 
    case 'time3': 
      break; 
  }
}

Relevant HTML code:

<select name="time1" onChange="populateNext(this.form,this.selectedIndex,'time1');"><option value="0" selected>Choose a time:</option><option value="10:00am">10:00am</option><option value="12:15pm (lunch served)">12:15pm (lunch served)</option><option value="5:30pm">5:30pm</option><option value="7:00pm">7:00pm</option></select>

<input type="hidden" name="time1_value" value="">

<select name="time2" id="time2" onChange="populateNext(this.form,this.selectedIndex,'time2');">
<input type="hidden" name="time2_value" value="">

<select name="time3" id="time3" onChange="populateNext(this.form,this.selectedIndex,'time3');"></select>
<input type="hidden" name="time3_value" value="">

On first execution of the javascript populateNext routine, the following happens (10:00am is chosen):
1) time1_value 's value is set to the selected time (working properly)
2) time2 is populated with the following values only:
Choose a time:
12:15pm (lunch served)

What's really supposed to happen is that time2 will be populated with all values from time_array except for the selected value in time1. Could someone point out my logic error?

Thanks


Cheers!
Laura

 

[jemminger]

when you're rebuilding the option lists, you can't skip an index

change this:
myform.elements['time2'].options = new Option(time_array,i);


to this:
myform.elements['time2'].options[myform.elements['time2'].options.length] = new Option(time_array,i);

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[LTeeple]

That's super-fantastic! Thanks for the help, AND explanation.

Cheers!


Cheers!
Laura