jquery 操作select IE7下奇怪问题

yuaccp2 发布于 2011/06/17 11:01
阅读 1K+
收藏 0
在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">
加载中
0
yuaccp2
yuaccp2

引用来自“mark35”的答案

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

确实如此~~谢谢~~

var select = document.createElement("select");
select.id = "A";
select.name = "A";
$("#box").empty().append('<p>'+add_i+'</p>').append(select);
0
mark35
mark35
用firebug看看是否新创建的select元素高度有问题。
0
yuaccp2
yuaccp2

引用来自“mark35”的答案

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

Firefox下没有问题,IE下用调试工具看了,option值是有添加进去,就是点击,没有出现下拉框。你可以复制下代码在HTML上运行下。。

希望@红薯老大,提供直接执行HTML代码功能。方便交流,哈哈

0
mark35
mark35
可以换个低版本的jquery看看
0
mark35
mark35

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

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

 

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

 

0
yuaccp2
yuaccp2

引用来自“mark35”的答案

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

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

 

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

 

觉得不是数据问题,试过了,问题依旧~好像select控件没被激活一样,用IE8开发工具,手动添加样式什么的,就正常了。但是用脚本添加样式($("#A").css('height','10ps'))问题还是一样。

谢谢~

0
mark35
mark35
那可能是 $("#box").empty().append('<p>'+add_i+'</p><select name="A" id="A"></select>'); 这段代码有问题,你换个创建select对象的方式看看,分别创建P和SELECT对象。
返回顶部
顶部