在前几篇中有分享Jquery Select2的文章，Select2是一个基于jQuery的替代选择框。 它支持搜索、远程数据集和无限滚动的结果。
今天继续分享一下Select2的使用。
1、Select2绑定事件
主要能用到事件有select数据绑定时、打开时、关闭时。
| 代码如下 | 复制代码 |
| $("#selectsq").select2(); $("#selectsq").on("change", function (e) { ToggleProductList();}) |
|
在ToggleProductList函数中，可以判断是否选择正确的数据：
| 代码如下 | 复制代码 |
|
function Getselect2ID(idd) { var data = $("#" + idd).select2("data"); var datastring = ""; $.each(data, function (key, val) { datastring = datastring + val.id + ","; }); return datastring; } function ToggleProductList() { var sqlist = Getselect2ID("selectsq"); if (sqlist.length > 0) { $("#divselectProduct").show(); } else { $("#divselectProduct").hide(); } } var data = $("#" + idd).select2("data")是获取select选中的数据 |
|
2、支持多选
类似上面图示的多tags选择，只要定义属性multiple=""就行
| 代码如下 | 复制代码 |
|
<select multiple="" name="selectsq" id="selectsq" style="width:300px" class="populate select2-offscreen" tabindex="-1"> |
|
3、动态绑定数据，这个可以采用获取数据，组织html的方式，也可以采用Select2自带的ajax方式获取。
| 代码如下 | 复制代码 |
|
function GetCityData() { var cityId = GetCity(); $.ajax({ type: "post", dataType: 'json', url: ajaxUrl, data: { Operate: "searchcitydata", txtsqname: $("#txtsqname").val(), txtspname: $("#txtspname").val(), txtsjname: $("#txtsjname").val(), CityId: cityId }, success: function (data, textStatus) { if (data != null) { var model = eval(data); if (model != null && model != "undefined") { //selectsq var html = ''; $.each(model.ListSQ, function (key, val) { html = html + ' <option value="' + val.Id + '">' + val.Name + '</option>'; }); $("#selectsq").append(html); } else { alert("加载数据失败！"); return; } } }, complete: function (XMLHttpRequest, textStatus) { }, error: function (e) { alert("加载数据错误！"); return; } }); } |
|
时间： 2024-12-09 15:32:56