今天郁闷一个问题: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>
解决方案 »
- 为什么这样写不能实现tr的隐藏呢???
- 关于 javascript 赋值到保存按钮下面变量的问题!
- 急急急急,求高人
- 点击文字自动变成文本域并出现按钮
- javascript里那个$什么用?是怎么样定义的,给我个例子就可以了。谢谢!
- 请问,在"非IE"的浏览中如何做到如IE的xmlhttp功能?
- 可不可以遍历class="abc"的所有对象?
- 请问如何用script执行将一个按钮按一下的动作
- 急!!!!!有没有办法可以动态调整表格的边框?
- webuploader队列中有多个文件,怎么对文件单个的控制暂停和继续上传?
- 急!急!急!SyntaxHighlighter 3.0.83 换行不着色了!(图)
- jqzoom图片放大镜效果在IE7.0下放大镜不透明
<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掉了。