[英]Why this javascript event isn't working on IE ..?
I am trying to load options to drop-down list depending on the selection made on other drop-down list. 我正在尝试根据其他下拉列表上的选择将选项加载到下拉列表中。 I have written a code which works on almost all major browsers, FF, Opera, Safari but doesn't work in IE7.
我编写了一个代码,该代码几乎可以在所有主要浏览器(FF,Opera,Safari)上运行,但是在IE7中不起作用。
Here is my Javascript code: 这是我的Javascript代码:
<script type = "text/javascript">
var txt1 = "<option>state1<\/option><option>state2<\/option><option>state3<\/option><option>state4<\/option>";
var txt2 = "<option>stateA<\/option><option>stateB<\/option><option>stateC<\/option><option>stateD<\/option><option>stateE<\/option>";
function states_val() {
if(document.getElementById("country").options[0].selected==true) {
document.getElementById("states").disabled=true;
document.getElementById("states").innerHTML="<option>Select country<\/option>";
}
else if(document.getElementById("country").options[1].selected==true) {
document.getElementById("states").disabled=false;
document.getElementById("states").innerHTML=txt1;
}
else if(document.getElementById("country").options[2].selected==true) {
document.getElementById("states").disabled=false;
document.getElementById("states").innerHTML=txt2;
}
}
</script>
And HTML Code: 和HTML代码:
<select id="country" name="name_country" onchange="states_val()">
<option>select</option>
<option>country1</option>
<option>country2</option>
</select>
<select id="states" name="name_states"></select>
I am bound with Client-side scripting and have to simulate this using Javascript only. 我受客户端脚本的约束,只能使用Javascript模拟此脚本。 please help me debugging the code.
请帮助我调试代码。
Yeah, many of the 'special' elements such as <select>
and <table>
can't have their innerHTML
set in IE. 是的,许多“特殊”元素(例如
<select>
和<table>
不能在IE中设置其innerHTML
。
If you want to set the innerHTML
from string you have to go about it in a roundabout way: set the innerHTML
of a temporary div
elements to <select>
+your options+ </select>
, then move all the option objects from the new select to the old one. 如果要从字符串设置
innerHTML
,则必须采用一种绕行方式:将临时div
元素的innerHTML
设置为<select>
+ your options + </select>
,然后从新的select中移动所有选项对象到旧的。
It is generally better to use DOM methods instead of innerHTML
and escaped markup: 通常最好使用DOM方法而不是
innerHTML
和转义标记:
function setOptions(select, options) {
select.options.length= 0;
for (var i= 0; i<options.length; i++)
select.options[i]= new Option(options[i]);
}
var statemap= [
['Select country'],
['Karnataka', 'MP', 'UP', 'Jammu & Kashmir', 'Himachal Pradesh'],
['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Delaware', 'Florida']
];
function states_val() {
var states= statemap[document.getElementById('country').selectedIndex];
setOptions(document.getElementById('states'), states);
}
I think it is a confirmed bug ( http://alexle.net/archives/150 ) the solution is to replace the entire select element and not just the innerHTML ( the options..) 我认为这是一个已确认的错误( http://alexle.net/archives/150 ),解决方案是替换整个select元素,而不仅是innerHTML(options ..)
Alternatively you could manually create option nodes with 或者,您可以使用以下命令手动创建选项节点
var anOption = document.createElement('option');
anOption.innerHTML = '..';
anOption.value = '..';
document.getElementByID('states').appendChild(anOption);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.