首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery实现两级上拉框

2012-11-09 
Jquery实现两级下拉框在公司写了一个两级下拉框,用了Jquery框架,初次简单的使用了一下,感觉很好,以后用的

Jquery实现两级下拉框
在公司写了一个两级下拉框,用了Jquery框架,初次简单的使用了一下,感觉很好,以后用的机会会很多。

JSP页面的代码:

<table>
      <tr>
       <td>
         <select name="sheng" id="sheng" style="width:98px;color:#003366" onChange="abc();">
           <option selected value="0">选择省份</option>
       <% Iterator it=list.iterator();
       while(it.hasNext()){
       Sheng sheng=(Sheng)it.next();
       %>
        <option value="<%=sheng.getSid() %>" ><%=sheng.getSheng() %></option>
       <%
       }
       %>
         
         </select>
           ->
     </td>
     <td id = "aa">     
           <select id="a" >
            <option value="0">选择市</option>
           </select>
          
       </td>
      </tr>
     </table>

JS关键代码:

<script>

function abc(){
  var sheng=document.getElementById('sheng').value;
  $.get("shi.do?t="+Math.random()+"&shengID="+sheng,function callback(data){  //将节点的数据发给服务端/shi ,当加载成功时调用function (data)
    $("#aa").html(data);         //将从服务端的数据输入到id ="aa"的标签里。
  });

}

</script>

Action代码:

ServletOutputStream out=response.getOutputStream(); //获得ServletOutputStream的对象out
  StringBuffer sb=new StringBuffer();
  sb.append("<select name='shi' id='shi' align='left'><option value='0' id='s'>选择市</option>");
  for(int i=0;i<list.size();i++){
   Shi shi=list.get(i);
   sb.append("<option value="+shi.getSid()+">"+shi.getShi()+"</option>");
  }
  sb.append("</select>");
  out.print(sb.toString());//输出字符串数据到JSP页面上



截了一个图,好像看不出效果。

热点排行