我有两个下拉列表,这是第一个
<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>
我该怎么做?。请给我建议。
答案 0 :(得分:0)
//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>