我希望在上次选择的基础上显示选择中的选项,我曾尝试在javascript中使用createOption,但它会在我更改parent-select中的选项时不断创建选项,因此我需要一种方法来实现这一点,我的代码如下:
function addsem(deg)
{
var semnum,i;
switch(deg)
{
case 'var1':numsem=8;
break;
case 'var2':numsem=6;
break;
case 'var3':numsem=10;
break;
case 'var4':numsem=4;
}
select1=document.getElementById('selsem');
var sem=new Array('I','II','III','IV','V','VI','VII','VIII','IX','X');
for(i=0;i<numsem;i++)
{
var opt = new Option(sem[i],sem[i]);
select.options.add(opt);
}
}
我的html代码:
<select name="seldeg" id="seldeg" style="width:180px onChange="addsem(this.value);">
<option value="deg">Select</option>
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
<option value="var4">var4</option>
</select>
<select name="selsem" id="selsem" style="width:180px;" onchange="" >
<option value="sem">Select</option>
</select>
我希望选择显示不同范围的sems,即I、II。。。IV代表var4、I、II。。。。var2 的VI
每次我改变度数。
Thaknyou提前
在Javascript中,select.options.add
应该是select1.options.add
。HTML中有语法错误,您没有关闭style="width:180px
属性。此外,您还需要从选择中删除项目,这样每次更改第一个选择时就不会得到重复的项目。
jsFiddle演示
function addsem(deg) {
var semnum, i;
switch (deg) {
case 'var1':
numsem = 8;
break;
case 'var2':
numsem = 6;
break;
case 'var3':
numsem = 10;
break;
case 'var4':
numsem = 4;
}
select1 = document.getElementById('selsem');
// remove existing items
while (select1.options.length) {
select1.remove(0);
}
var sem = new Array('I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X');
for (i = 0; i < numsem; i++) {
var opt = new Option(sem[i], sem[i]);
select1.options.add(opt); // changed to select1
}
}