1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. GetByJquery();
  4. $("#ddlProvince").change(function() { GetCity() });
  5. $("#ddlCity").change(function() { GetDistrict() });
  6. });
  7.  
  8. function GetByJquery() {
  9.  
  10. $("#ddlProvince").empty(); //清空省份SELECT控件
  11.  
  12. $.getJSON("/ajax/GetProvinceList", function(data) {
  13. $.each(data, function(i, item) {
  14. $("<option></option>")
  15. .val(item["ProvinceID"])
  16. .text(item["ProvinceName"])
  17. .appendTo($("#ddlProvince"));
  18. });
  19. GetCity();
  20. });
  21.  
  22. }
  23.  
  24. function GetCity() {
  25.  
  26. $("#ddlCity").empty(); //清空城市SELECT控件
  27. var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
  28. $.getJSON(url, function(data) {
  29. $.each(data, function(i, item) {
  30. $("<option></option>")
  31. .val(item["CityID"])
  32. .text(item["CityName"])
  33. .appendTo($("#ddlCity"));
  34. });
  35. GetDistrict();
  36. });
  37. }
  38.  
  39. function GetDistrict() {
  40. $("#ddlDistrict").empty(); //清空市区SELECT控件
  41. var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
  42.  
  43. $.getJSON(url, function(data) {
  44. $.each(data, function(i, item) {
  45. $("<option></option>")
  46. .val(item["DistrictID"])
  47. .text(item["DistrictName"])
  48. .appendTo($("#ddlDistrict"));
  49. });
  50. });
  51. }
  52.  
  53. </script>

Jquery获取数据并生成下拉菜单的更多相关文章

  1. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  3. jQuery实现多级手风琴树形下拉菜单(源码)

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  4. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  5. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  6. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  7. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  8. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

  9. 实例:用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

随机推荐

  1. Xdebug开源PHP程序调试器

    Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 本文为大家讲解的是在linux下xdebug的安装和配置方法,感兴趣的同学参考下 ...

  2. 团队作业--Beta版本冲刺

    项目冲刺随笔 第一天 第二天 第三天 第四天 第五天 第六天 第七天

  3. Exceptionless 本地部署

    免费开源分布式系统日志收集框架 Exceptionless 前两天看到了这篇文章,亲身体会了下,确实不错,按照官方的文档试了试本地部署,折腾一番后终于成功,记下心得在此,不敢独享. 本地部署官方wik ...

  4. jsp学习(五)

    在进行jsp与jdbc连接时,出现这样一个错误,提示如下: java.net.ConnectException: Connection refused: connect 后来发现是由于mysql数据库 ...

  5. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  6. ECSHOP验证码背景图修改教程

    ECSHOP验证码背景图修改教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-18   ECSHOP验证码背景图修改教程: ECSHOP前后台的某些地 ...

  7. Hibernate之多对多

    一.项目结构如下图 二.保存学生和课程及其学生选课关系代码如下(测试类中不能再有双向关联,否则会报错,因为,都维护了中间表外键,会有中间表外键冲突,如果非要写双向关联,就需要配置中设置某一方维护主键, ...

  8. DataFrame转矩阵Np-Array

    DataFrame.as_matrix(columns=None)¶ Convert the frame to its Numpy-array representation.

  9. 利用a标签自动解析URL

    parseURL // This function creates a new anchor element and uses location // properties (inherent) to ...

  10. WIN7下使用VC2010调试uCOS-II 2.91

    WIN7下使用VC2010调试uCOS-II 2.91 http://www.amobbs.com/thread-5462878-1-1.html ucos系统学习汇总 http://www.cnbl ...