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);