如何根据另一个下拉选项选择更改一个特定的下拉选项？

Question

I have two dropdown list parallely, this is first one

 <select onchange="selchng1(1,this.id)" id="first1" name="sesion[]" class="tx_bx">
<option select="selected" value="select1">- Select -</option>
<option value="14275">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="14276">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="14277">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="14278">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
</select>

and second one is,

<select onchange="selchng1(1,this.id)" id="first_time1" name="time[]" class="tx_bx"><option select="selected" value="select2">- Select -</option>
<option value="14270">#1 only: 1pm</option>
<option value="14271">#1 only: 1:30pm</option>
<option value="14272">#1 only: 2pm</option>
<option value="14273">#1 only: 2:30pm</option>
<option value="14313">#1 only: 3:30pm</option>
<option value="14314">#1 only: 4pm</option> 
</select>

now what i need to do is,

when select from first dropdown first option <option value="14275">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>

i need to display first three option from second dropdown.

<option value="14270">#1 only: 1pm</option>
<option value="14271">#1 only: 1:30pm</option>
<option value="14272">#1 only: 2pm</option>

then for remaining options in first select box,

<option value="14275">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="14276">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="14277">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="14278">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>

i need to display remaining options from second select box,

<option value="14273">#1 only: 2:30pm</option>
<option value="14313">#1 only: 3:30pm</option>
<option value="14314">#1 only: 4pm</option>

How can i do this?.Please advice me.

Answer 1

//This stores the options
var options=[
  ["14270", "#1 only: 1pm"],
  ["14271", "#1 only: 1:30pm"],
  ...
  ["14314","#1 only: 4pm"]
];

//This is the index first1 -> first_time1
var index=[
  [],
  [0,1,2],
  [3,4,5],
  [3,4,5],
  [3,4,5]
];

function update_first_time1(selidx) {
  //Get select box options collection
  var o=document.getElementById('first_time1');
  if (!o) return false;
  if (!o.options) return false;
  o=o.options;

  //Empty options
  while (o.length>0) o[o.length-1]=null;

  //Get the index of options to add
  var a=index[selidx];

  //Add these options
  for (var i=0; i<a.lenght; i++)
    o[o.length]=new Option(options[i][1], options[i][0]);

  //done!
}

//First select box: hook onchange 
<select onchange="selchng1(1,this.id); update_first_time1(this.selectedIndex)" id="first1" name="sesion[]" class="tx_bx">
...
</select>