带有 javascript 的 select 选项未显示 select 值
select option with javascript is not displaying select value
这里我有一个简单的 3 select 选项,比如 select 1,select 2 和 select 3。
在更改 select 1 选项时将重置 select 2 和 select 3 中的值,并且在更改 select 2 值时调用另一个 javascript 函数重置 select 3 .
中的值
这里的问题首先是 select 1 工作正常并在 select 中正确显示 select 2 值 select2 不是 selecting 始终显示一个值。
如果我从 select 2 中删除 javascript onchange 调用,那么它工作正常。
下面的示例代码。
function L1Change() {
var obj = document.getElementById("L1");
objVal = obj.options[obj.options.selectedIndex].value;
var obj2 = document.getElementById("L2");
obj2.options.length = 0;
obj2.options[0] = new option("op33","1");
obj2.options[0].selected = "true";
if (objVal == 1) {
obj2.options[1] = new option("op34","2");
obj2.options[2] = new option("op35","3");
}
if (objVal == 2) {
obj2.options[1] = new option("op44","2");
obj2.options[2] = new option("op45","3");
}
}
<select name="L1" id="I1" onChange="javascript:L1Change()">
<option selected="selected" value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
</select>
<select name="L2" id="I2" onChange="javascript:L2Change()">
<option selected="selected" value="1">op11</option>
<option value="2">op12</option>
<option value="3">op13</option>
</select>
如果我从 select2 中的 select2 值中删除更改功能,则从上面的代码中可以正常工作。
谁能告诉我如何解决这个问题。
谢谢。
<!DOCTYPE html>
<html>
<head>
<script>
function configureDropDownLists(ddl1,ddl2) {
var Customer = new Array('Customer1', 'Customer2', 'Customer3');
var Script = new Array('Script1', 'Script2', 'Script3');
var etc = new Array('etc1', 'etc2', 'etc3');
var cust1 = new Array('cust11', 'cust12', 'cust13');
var cust2 = new Array('cust21', 'cust22', 'cust23');
var cust3 = new Array('cust31', 'cust32', 'cust33');
switch (ddl1.value) {
case 'Customer':
ddl2.options.length = 0;
for (i = 0; i < Customer.length; i++) {
createOption(ddl2, Customer[i], Customer[i]);
}
break;
case 'Script':
ddl2.options.length = 0;
for (i = 0; i < Script.length; i++) {
createOption(ddl2, Script[i], Script[i]);
}
break;
case 'etc':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, etc[i], etc[i]);
}
break;
case 'Customer1':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust1[i], cust1[i]);
}
break;
case 'Customer2':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust2[i], cust2[i]);
}
break;
case 'Customer3':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust3[i], cust3[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<body>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Customer">Customer</option>
<option value="Script">Script</option>
<option value="etc">etc</option>
</select>
<select id="ddl2" onchange="configureDropDownLists(this,document.getElementById('ddl3'))">
</select>
<select id="ddl3">
</select>
</body>
</html>
这里我有一个简单的 3 select 选项,比如 select 1,select 2 和 select 3。
在更改 select 1 选项时将重置 select 2 和 select 3 中的值,并且在更改 select 2 值时调用另一个 javascript 函数重置 select 3 .
中的值这里的问题首先是 select 1 工作正常并在 select 中正确显示 select 2 值 select2 不是 selecting 始终显示一个值。
如果我从 select 2 中删除 javascript onchange 调用,那么它工作正常。
下面的示例代码。
function L1Change() {
var obj = document.getElementById("L1");
objVal = obj.options[obj.options.selectedIndex].value;
var obj2 = document.getElementById("L2");
obj2.options.length = 0;
obj2.options[0] = new option("op33","1");
obj2.options[0].selected = "true";
if (objVal == 1) {
obj2.options[1] = new option("op34","2");
obj2.options[2] = new option("op35","3");
}
if (objVal == 2) {
obj2.options[1] = new option("op44","2");
obj2.options[2] = new option("op45","3");
}
}
<select name="L1" id="I1" onChange="javascript:L1Change()">
<option selected="selected" value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
</select>
<select name="L2" id="I2" onChange="javascript:L2Change()">
<option selected="selected" value="1">op11</option>
<option value="2">op12</option>
<option value="3">op13</option>
</select>
如果我从 select2 中的 select2 值中删除更改功能,则从上面的代码中可以正常工作。 谁能告诉我如何解决这个问题。
谢谢。
<!DOCTYPE html>
<html>
<head>
<script>
function configureDropDownLists(ddl1,ddl2) {
var Customer = new Array('Customer1', 'Customer2', 'Customer3');
var Script = new Array('Script1', 'Script2', 'Script3');
var etc = new Array('etc1', 'etc2', 'etc3');
var cust1 = new Array('cust11', 'cust12', 'cust13');
var cust2 = new Array('cust21', 'cust22', 'cust23');
var cust3 = new Array('cust31', 'cust32', 'cust33');
switch (ddl1.value) {
case 'Customer':
ddl2.options.length = 0;
for (i = 0; i < Customer.length; i++) {
createOption(ddl2, Customer[i], Customer[i]);
}
break;
case 'Script':
ddl2.options.length = 0;
for (i = 0; i < Script.length; i++) {
createOption(ddl2, Script[i], Script[i]);
}
break;
case 'etc':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, etc[i], etc[i]);
}
break;
case 'Customer1':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust1[i], cust1[i]);
}
break;
case 'Customer2':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust2[i], cust2[i]);
}
break;
case 'Customer3':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust3[i], cust3[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<body>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Customer">Customer</option>
<option value="Script">Script</option>
<option value="etc">etc</option>
</select>
<select id="ddl2" onchange="configureDropDownLists(this,document.getElementById('ddl3'))">
</select>
<select id="ddl3">
</select>
</body>
</html>