CascadingDropDown是jquery联动下拉框插件,可以用于asp.net,或者mvc3,采用ajax,返回json数据。
<asp:DropDownList ID="ddlRegion" runat="server"></asp:DropDownList><asp:DropDownList ID="ddlProvince" runat="server"></asp:DropDownList><asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script><script src="Scripts/jquery.cascadingDropDown.js" type="text/javascript"></script>
当第一个列表中选择后,第二个列表自动填充
$("#ddlProvince").CascadingDropDown("#ddlRegion", 'Controls/AreaHandler.ashx', { textfield: 'ProvinceName', valuefiled: 'ProvinceId' });$("#ddlCity").CascadingDropDown("#ddlProvince", 'Controls/AreaHandler.ashx', { textfield: 'CityName', valuefiled: 'CityId' });
JSON:
{"count":"7","error":"","success":"true","data":[
{"ProvinceId":"14","ProvinceName":"江西省"},
{"ProvinceId"
:"16","ProvinceName":"河南省"},
{"ProvinceId":"17","ProvinceName":"湖北省"},
{"ProvinceId"
:"21","ProvinceName":"广西壮族自治区"}]
}
详细:
$(targetID).CascadingDropDown(sourceID, actionPath, settings)
- targetID
即将自动填充选择列表的ID. - sourceID
change事件的下拉框ID(即父控件ID). - actionPath
post数据的URL
参数:
- promptText
下拉框第一个选项
默认: -- 请选择 -- - loadingText
当加载时.
默认:加载中.. - errorText
出错时
默认: 加载失败. - postData
post完成后的数据
如:
postData: function () {
return { prefix: $('#txtPrefix').val(), customerID: $('#customerID').val() };
}
将会 prefix=foo&customerID=bar 方式传参.
默认: 以序列化 serialize 一定要有控件的name属性 不然无法序列化
- onLoading (event)
正在加载…… - onLoaded (event)
加载完成后……
textfield:对应数据库 值 字段
valuefiled:对应数据库 id 字段
默认:textfield: 'text',
valuefiled: 'value'
后台处理数据:
if (context.Request.Params["ddlProvince"] != null){sql = String.Format("SELECT CityId, CityName FROM T_City where ProvinceId='{0}'", context.Request.Params["ddlProvince"]);}
if (context.Request.Params["ddlRegion"] != null)sql = String.Format("SELECT ProvinceId,ProvinceName FROM T_Province where RegionId='{0}'", context.Request.Params["ddlRegion"]);
jquery.cascadingDropDown.js
(function ($) { $.fn.CascadingDropDown = function (source, actionPath, settings) { if (typeof source === 'undefined') {throw "?????"; } if (typeof actionPath == 'undefined') { throw "?????"; } var optionTag = '<option></option>'; var config = $.extend({}, $.fn.CascadingDropDown.defaults, settings); return this.each(function () { var $this = $(this); (function () { var methods = { clearItems: function () { $this.empty(); if (!$this.attr("disabled")) { $this.attr("disabled", "disabled"); } }, reset: function () { methods.clearItems(); $this.append($(optionTag).attr("value", "").text(config.promptText)); $this.trigger('change'); }, initialize: function () { if ($this.children().size() == 0) { methods.reset(); } }, showLoading: function () { methods.clearItems(); $this.append($(optionTag).attr("value", "").text(config.loadingText)); }, loaded: function () { $this.removeAttr("disabled"); $this.trigger('change'); }, showError: function () { methods.clearItems(); $this.append($(optionTag).attr("value", "").text(config.errorText)); }, post: function () { methods.showLoading(); $.isFunction(config.onLoading) && config.onLoading.call($this); $.ajax({ url: actionPath, type: 'POST', dataType: 'json', data: ((typeof config.postData == "function") ? config.postData() : config.postData) || $(source).serialize(), success: function (data) { methods.reset(); $.each(data.data, function (i, k) { $this.append($(optionTag).attr("value", eval("k." + config.valuefiled)).text(eval("k." + config.textfield))); }); methods.loaded(); $.isFunction(config.onLoaded) && config.onLoaded.call($this); }, error: function () { methods.showError(); } }); } }; $(source).change(function () { var parentSelect = $(source); if (parentSelect.val() != '') { methods.post(); } else { methods.reset(); } }); methods.initialize(); })(); }); } $.fn.CascadingDropDown.defaults = { promptText: '-- ??? --', loadingText: '??????', errorText: '????', postData: null, onLoading: null, onLoaded: null, textfield: 'text', valuefiled: 'value' } })(jQuery);
![](https://i-blog.csdnimg.cn/blog_migrate/fe538c068c0e43735309f4746e231088.jpeg)