jquery 操作select IE7下奇怪问题

Question

在IE下，点击click me 按钮两次会出现下拉框不可选，不知为何，重新创建的select控件，第二次添加值会出问题。火狐下没有此问题

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<SCRIPT type="text/javascript">
<!--
var add_i = 0;
$(function (){
	$("#btn").click(function (){
		if(add_i%2 == 0){
			if(window.console != undefined)console.log('create select');
			$("#box").empty().append('<p>'+add_i+'</p><select name="A" id="A"></select>');
		}
		var data = {"4249":"Manicaland","4250":"Mashonaland Central","4251":"Mashonaland East","4256":"Mashonaland West","4255":"Masvingo","4253":"Matabeleland North","4254":"Matabeleland South","4252":"Midlands"};
		var str = "<option value=''> Select State/Province </option>";
		for(i in data){
			str+= "<option value='" + i + "'>" + data[i] + "</option>";
		}
		$("#A").empty().append(str);
		add_i++;
	});
});
//-->
</SCRIPT>
<div id="box">
	<select name="A" id="A">
	</select>
</div>
<input type="button" value="click me" onclick="" id="btn">

Answer 1

迭代时最好加上个判断，并且对变量加上var 定义

for(var x in data){
  if (data.hasOwnProperty(x)) {
     str+= "<option value='" + x + "'>" + data[x] + "</option>";
  }
  ...
}

 

我个人习惯是对数组循环用i变量，对对象迭代用x变量名，这样就不容易混淆。

 

Answer 2

迭代时最好加上个判断，并且对变量加上var 定义

for(var x in data){
  if (data.hasOwnProperty(x)) {
     str+= "<option value='" + x + "'>" + data[x] + "</option>";
  }
  ...
}

 

我个人习惯是对数组循环用i变量，对对象迭代用x变量名，这样就不容易混淆。

 

Answer 3

可以换个低版本的jquery看看

Answer 4

用firebug看看是否新创建的select元素高度有问题。

Answer 5

用firebug看看是否新创建的select元素高度有问题。

Answer 6

那可能是

$("#box").empty().append('<p>'+add_i+'</p><select name="A" id="A"></select>'); 这段代码有问题，你换个创建select对象的方式看看，分别创建P和SELECT对象。