JQuery中点击按钮，循环往下拉框中添加选项失败。为什么？
0
悬赏园豆：10
[已解决问题]
解决于 2013-12-13 14:34
省市选择中，点击一个按钮，往下拉框中添加地区数据。单条添加数据，能行。通过循环方式添加，失败。为什么？详细的代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
var data="[{'Id':4,'Name':'邯郸市','Pid':1},{'Id':5,'Name':'石家庄','Pid':1},{'Id':6,'Name':'邢台市','Pid':1}]";
var $pro=$('#selPro');
data2Sel(data,$pro);
});
});
function data2Sel(data,selOption){
selOption.length=0;
var res=eval(data);
//循环添加失败，res[i].Id有值，opt.val()有值，opt.html()有值。但添加失败。为什么？
for(var i=0;i<res.length;i++){
var opt=$('<option value='+res[i].Id+'>'+res[i].Name+'</option>');
selOption.append(opt);
}
//通过如下的方式添加成功。
// var $opt=$('<option value=1>河北省</option>');
// selOption.append($opt);
// $opt=$('<option value=1>河南省</option>');
// selOption.append($opt);
}
</script>
</head>
<body>
<input type="button" id="btn" />
<select id="selPro">
</select>
</body>
</html>
最佳答案
0
我觉得是 selOption.length=0的原因，或者是var opt=$('<option value='+res[i].Id+'>'+res[i].Name+'</option>');
没必要加$();
这样写有点不太好。
var data 不用加引号。
function data2Sel(data,selOption){
var opt ="";
$.each(data,function(i,n)
{
opt += "<option value="+n.Id+">"+n.Name+"</option>"
}
selOption.append(opt);
}
收获园豆：10
嗯，谢谢你的启发！问题已经解决了！将 selOption.length=0 该为 selOption.empty()就OK了！
加$()是JQuery对象，不加是DOM对象，加不加都一样！
data加“”跟不加都行，只是我有点搞不懂，加与不加有什么不一样？
谢谢你的回答！
@cxiaoluab:
首先加$()是没必要，这样会多加了消耗。
然后data加了""，你就得用eval(data)，eval这个“邪恶”东西能不用尽量不用。
@|WinKi|: 嗯，知道了，谢谢指教！
