夏日博客

A-A+

jquery与AJAX实现二级联动实例(对中文处理比较好)

2016年01月10日 前端设计 暂无评论 阅读 6 views 次

jquery与AJAX实现二级联动实例我介绍过很多在此再为各位介绍一个对中文有比较好的处理，有兴趣的可进来看看。

所谓二级联动，其实稍微懂点js的都不陌生，关于二级联动的实现，不使用JQ，而是原生态的JS些，效率会更好，但是个人感觉用JQ写的话，思路会清晰点。

代码:html部分

  1. <<a href="/tags.php/select/" target="_blank">select</a> name=”” id=”province”>  
  2. <option>请选择</option>  
  3. <option value=1>广东</option>  
  4. <option value=2>湖南</option>  
  5. </select>  
  6. <select name=”” id=”city”>  
  7. <option>请选择</option>  
  8. </select>  

JQ部分:

  1. <script type=”text/<a href="/js_a/js.html" target="_blank">javascript</a>”>  
  2. $(document).ready(function () {  
  3. $(“#province”).change(function () {  
  4. $.ajax({  
  5. type: “post”,  
  6. url: “Index/city?id=”+$(this).val(),  
  7. datatype: “json”,  
  8. success: function (data) {  
  9. var sm = eval(data);  
  10. var str='<option>请选择</option>';  
  11. for(i=0;i<sm.length;i++){  
  12. str+='<option value=’+sm[i].id+’>’+sm[i].name+'</option>';  
  13. }  
  14. $(“#city”).html(str);  
  15. }  
  16. });  
  17. });  
  18. });  
  19. </script>  

选择省份后，将省份的ID传递给city页面，然后从数据库中查询到该省份下面所有的城市,然后返回JSON数据(data),例如选择广东后，返回的JSON数据格式为：

  1. [{“id”:”3″,”pid”:”1″,”name”:”\u5e7f\u5dde”,”ename”:”guangzhou”},{“id”:”4″,”pid”:”1″,”name”:”\u6df1\u5733″,”ename”:”shenz”},{“id”:”5″,”pid”:”1″,”name”:”\u4e2d\u5c71″,”ename”:”www.xiariboke.net”}]  
标签：

给我留言