今天郁闷一个问题: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>

解决方案 »

  1.   

    附录,服务端返回的XML<?xml version="1.0" encoding="UTF-8"?>
    <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>
      

  2.   

    alert(options); 看看是什么?
      

  3.   

    alert(options); 
    第一次:<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中没效果 感觉效果好像又 后来又消失 不知道是什么原因
      

  4.   

    OK 我找到原因了
     <input type="submit" id="sub1" value="解析">
    和<input type="submit" id="sub2" value="重置">
     改为button 粗心了下
      

  5.   

     $("#sub2").bind("click",reset);
     看看是不是这句的原因,
     同时又reset掉了。
      

  6.   

    $("#sel_1").append(options);试试html(options)