here i have a simple 3 select options , like select 1 ,select 2 and select 3 .
on changing select 1 option will reset the values in select 2 and select 3 , and on changing the select 2 values calling another javascript function to reset the values in select 3 .
the problem here is first select 1 is working fine and displaying select 2 values correctly upon selecting the value from select2 is not selecting always showing the one value.
if i remove the javascript onchange call from select 2 then its working fine.
sample code below .
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>
from the above code if i removed on change function from select2 values in select2 is working properly . any one give me an idea how to fix this issue .
Thanks.