今天郁闷一个问题:JQuery向select添加option没有效果
页面通过$.ajax请求后台返回xml。通过JQuery解析XML组装数据。
1.后台已经返回了XML。并且是可以正确解析的,也有数据。
2.组装后的select子节点<option>是有值。
问题在于$("#sel_1").append(options);的时候,(options有数据,alert出可以看见)页面没有任何效果,select的选项并没有增加。我是想增加几个option. 不知道问题出在哪里,特费解。希望帮忙分析下 <script language="javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
<script language="javascript" >
$(document).ready(function(){
$("#action").attr("value","JqXmlAction");
$("#sub2").bind("click",reset);
$("#sub1").bind("click",toajax);
});
var toajax = function toajax(){
var jurl = "${pageContext.request.contextPath}/JqXmlAction.do" ;
var action = $("#action").attr("value");
//alert("jurl="+jurl);
$.ajax({
url: jurl,
type: 'post', //get方式请求容易出现乱码 并且解决方案复杂 建议使用POST方式提交
data:{"action":action},
dataType: 'xml',
timeout:10000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
parseXML(xml);
}
});
}
var reset = function reset(){
$("#sel1").empty();
$("#sel2").empty();
}
/*
*纯JQuery解析XML
*/
var parseXML = function parseXML(xml){
//alert("xml="+xml);
//服务器端返回对象是XML 纯JQuery解析XML
$(xml).find("parms").each(function(){
var options="";
var name = $(this).attr("name");
// alert("name="+name);
$(this).find("option").each(function(){
var value = $(this).attr("value") ;
var text = $(this).text() ;
options = options+ "<option value=\""+value+"\">"+text+"</option>"
});
alert("options="+options); //options是可已拼装出数据的,但是执行下面的代码页面select的选择项并没有增加
if("sel_1" == name){
$("#sel_1").append(options);//这句为什么没效果?
}else if("sel_2" == name){
$("#sel_2").append(options);
}
});
$("#test").attr("value","JQuery");
}
</script>
<body>
<form name="form1" method="post" >
<input type="hidden" id="action" value=""/>
<table width="370" height="151" border="1">
<tr>
<td colspan="2"><div align="center">解析XML一:JQuery</div></td>
</tr>
<tr>
<td width="142"><label>
<div align="center">
<input type="submit" id="sub1" value="解析">
</div>
</label></td>
<td width="212"><div align="center">
<input type="submit" id="sub2" value="重置">
</div></td>
</tr>
<tr>
<td>
<select id="sel_1">
<option>--测试1--</option>
</select> </td>
<td>
<select id="sel_2">
<option>--测试2--</option>
</select> <input type="text" id="test" value=""/></td>
</tr>
</table>
</form>
页面通过$.ajax请求后台返回xml。通过JQuery解析XML组装数据。
1.后台已经返回了XML。并且是可以正确解析的,也有数据。
2.组装后的select子节点<option>是有值。
问题在于$("#sel_1").append(options);的时候,(options有数据,alert出可以看见)页面没有任何效果,select的选项并没有增加。我是想增加几个option. 不知道问题出在哪里,特费解。希望帮忙分析下 <script language="javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
<script language="javascript" >
$(document).ready(function(){
$("#action").attr("value","JqXmlAction");
$("#sub2").bind("click",reset);
$("#sub1").bind("click",toajax);
});
var toajax = function toajax(){
var jurl = "${pageContext.request.contextPath}/JqXmlAction.do" ;
var action = $("#action").attr("value");
//alert("jurl="+jurl);
$.ajax({
url: jurl,
type: 'post', //get方式请求容易出现乱码 并且解决方案复杂 建议使用POST方式提交
data:{"action":action},
dataType: 'xml',
timeout:10000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
parseXML(xml);
}
});
}
var reset = function reset(){
$("#sel1").empty();
$("#sel2").empty();
}
/*
*纯JQuery解析XML
*/
var parseXML = function parseXML(xml){
//alert("xml="+xml);
//服务器端返回对象是XML 纯JQuery解析XML
$(xml).find("parms").each(function(){
var options="";
var name = $(this).attr("name");
// alert("name="+name);
$(this).find("option").each(function(){
var value = $(this).attr("value") ;
var text = $(this).text() ;
options = options+ "<option value=\""+value+"\">"+text+"</option>"
});
alert("options="+options); //options是可已拼装出数据的,但是执行下面的代码页面select的选择项并没有增加
if("sel_1" == name){
$("#sel_1").append(options);//这句为什么没效果?
}else if("sel_2" == name){
$("#sel_2").append(options);
}
});
$("#test").attr("value","JQuery");
}
</script>
<body>
<form name="form1" method="post" >
<input type="hidden" id="action" value=""/>
<table width="370" height="151" border="1">
<tr>
<td colspan="2"><div align="center">解析XML一:JQuery</div></td>
</tr>
<tr>
<td width="142"><label>
<div align="center">
<input type="submit" id="sub1" value="解析">
</div>
</label></td>
<td width="212"><div align="center">
<input type="submit" id="sub2" value="重置">
</div></td>
</tr>
<tr>
<td>
<select id="sel_1">
<option>--测试1--</option>
</select> </td>
<td>
<select id="sel_2">
<option>--测试2--</option>
</select> <input type="text" id="test" value=""/></td>
</tr>
</table>
</form>
<data>
<parms name="sel_1">
<option value="A1">ShangHai</option>
<option value="A2">BeiJing</option>
</parms>
<parms name="sel_2">
<option value="B1">HongKong</option>
<option value="B2">NewYork</option>
</parms>
</data>
第一次:<option value="A1">ShangHai</option><option value="A2">BeiJing</option>第二次::<option value="B1">HongKong</option><option value="B2">NewYork</option>分别添加到id="sel_1" 和 id="sel_2"的select中没效果 感觉效果好像又 后来又消失 不知道是什么原因
<input type="submit" id="sub1" value="解析">
和<input type="submit" id="sub2" value="重置">
改为button 粗心了下
看看是不是这句的原因,
同时又reset掉了。