<script type="text/javascript">
$(document).ready(function() {
GetByJquery();
$("#ddlProvince").change(function() { GetCity() });
$("#ddlCity").change(function() { GetDistrict() });
}); function GetByJquery() { $("#ddlProvince").empty(); //清空省份SELECT控件 $.getJSON("/ajax/GetProvinceList", function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["ProvinceID"])
.text(item["ProvinceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
}); } function GetCity() { $("#ddlCity").empty(); //清空城市SELECT控件
var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["CityID"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
GetDistrict();
});
} function GetDistrict() {
$("#ddlDistrict").empty(); //清空市区SELECT控件
var url = "/ajax/GetDistrictList/" + $("#ddlCity").val(); $.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["DistrictID"])
.text(item["DistrictName"])
.appendTo($("#ddlDistrict"));
});
});
} </script> <table>
<tr>
<td><select id="ddlProvince"/></td>
<td><select id="ddlCity"/></td>
<td><select id="ddlDistrict" /></td>
</tr>
</table>

转自:http://group.cnblogs.com/topic/9741.html

转:JQuery实现下拉框的数据加载和联动的更多相关文章

  1. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  2. el-select实现下拉框触底加载更多

    当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...

  3. combotree -下拉框树异步加载

    问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...

  4. 实现select下拉框的无限加载(懒加载)

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  5. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  6. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  7. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  8. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  9. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

随机推荐

  1. php Hash Table(三) Hash Table初始化

    HashTable初始化,在使用HashTable之前要先执行初始化,下边就看看初始化时都做了什么, Zend/zend_hash.c static const Bucket *uninitializ ...

  2. Linux环境PHP5.5以上连接SqlServer2008【全网最经典无错版】

    原文地址:http://blog.csdn.net/21aspnet/article/details/47451253 linux版本:64位CentOS 6.4 Nginx版本:nginx1.8.0 ...

  3. 浅谈JavaScript中的正则表达式

    引言 对于正则表达式我想作为程序员肯定使用过它,那天书般的表达方式,我用一次就记住它了.这篇博客先介绍一些正则表达式的内容,然后介绍JavaScript中对正则表达式特有的改进.下面开始介绍正则表达式 ...

  4. Html.RenderPartial、Html.RenderAction联系与区别

    1.引言 开发人员经常希望应用程序可以在多个不同的地方使用同样的Razor标签和HTML标记代码.这并不需要我们在多个地方重复这些标签,使用MVC中的分部视图和子动作可以让我们很好的解决类似的情况. ...

  5. webapi支持跨域访问

    写在前面 在实际应用中,跨域请求还是比较常见的,如何上接口直接支持跨域的访问呢? demo 场景项目A有个接口用来获取用户列表,现在项目b也有个功能需要加载用户列表.这两个项目在两个域名下,至少端口好 ...

  6. 【转】apache kafka监控系列-KafkaOffsetMonitor

    apache kafka监控系列-KafkaOffsetMonitor 时间 2014-05-27 18:15:01  CSDN博客 原文  http://blog.csdn.net/lizhitao ...

  7. 使用cachemanager做缓存(Session的缓存)

    1.我在这里直接用 cachemanager.redis 往redis里面存储缓存数据2.步骤 1)下载CacheManager.Redis(包含了CacheManager.Core) 下载Stack ...

  8. 一次关于使用status作为变量引发的bug及思考

    这个bug出现在一年前,当时自己大学还没毕业,刚刚进入一家公司实习.那个时候还没有用seajs或者requirejs那样的模块化管理的库,也没有用一个自执行的函数将要执行的代码包裹起来,于是bug就在 ...

  9. 如何去各型MCU的官网上下载正确的数据手册

    一.背景 感谢老司机左栋,虽然他一直很排斥这个名号 : ) ,可就技术上来说,还是当之无愧的. 弄了1年多单片机了,数据手册不是老员工或者头头给,就是从开发板资料拿.一直没有意识到,官网的东西才是最可 ...

  10. 2015baidu复赛 矩形面积(包凸 && ps:附quickhull模板)

    矩形面积 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...