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

Question

我有两个下拉列表平行，这是第一个

<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> 

和第二个是，

<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> 

现在我需要做的是，

时，从第一个下拉列表中选择第一选项 <option value="14275">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</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="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> 

我需要显示从第二个选择框其余选项，

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

我怎么能这样做呢？请您及时咨询我。

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>