0
点赞
收藏
分享

微信扫一扫

联动下拉框 jquery 插件(一)

CascadingDropDown是jquery联动下拉框插件,可以用于asp.net,或者mvc3,采用ajax,返回json数据。

联动下拉框 jquery 插件(一)_下拉框

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


举报

相关推荐

0 条评论