select2下拉框總結
在我的印象裡Select2有2個版本,最新版本有一些新的特性,並且更新了一下方法引數,比最初版本要好看一些,本文針對新版本。
官網:http://select2.github.io/
由於部落格系統的原因,所以只能演示簡單的功能。
一.檔案需要引入select2.full.js、select2.min.css(4.0.1版本)和jQuery.1.8.3及以上
最新版本的select2如果引用的jquery版本較低的話,某些功能無法正常使用。比如:清除功能allowClear: true
最新版本請使用<select></select>標籤(對於本地化的資料你可以使用input,但ajax遠端資料必須使用select)
二.placeholder
placeholder佔位提示文字,如果需要清楚功能,則必須設定placeholder。
三.載入本地資料
select2預設的資料屬性是id、text,新版本可以自定義,但還是用預設的比較好。所以提供的json中最好轉換為id、text形式,當然可以新增其他屬性。
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; $("#c01-select").select2({ data: data, placeholder:'請選擇', allowClear:true })
四.載入遠端資料
$("#c01-select").select2({ ajax: { url: "data.json", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, }; }, processResults: function(data) { return { results: data }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection });
說明:
1.q: params.term 查詢引數(params.term表示輸入框中內容,q發生到伺服器的引數名;所以這裡你可以新增自定義引數,如:stype:'person')
2.processResults中results: data返回資料(返回最終資料給results,如果我的資料在data.res下,則返回data.res。這個與伺服器返回json有關)
3.minimumInputLength 最小需要輸入多少個字元才進行查詢,與之相關的maximumSelectionLength表示最大輸入限制。
4.escapeMarkup字元轉義處理
5.templateResult返回結果回撥function formatRepo(repo){return repo.text},這樣就可以將返回結果的的text顯示到下拉框裡,當然你可以return repo.text+"1";等
6.templateSelection選中項回撥function formatRepoSelection(repo){return repo.text}
7.關於返回的 json的格式:select2預設json格式為[{id:1,text:'text'},{id:2,text:'text'}],新版嚴格要求這樣的格式,當然你可以新增列,如:[{id:1,text:'text',name:'liu'}]
五.獲取選中項
var res=$("#c01-select").select2("data")[0] ; //單選 var reslist=$("#c01-select").select2("data"); //多選 if(res==undefined) { alert("你沒有選中任何項"); } if(reslist.length) { alert("你選中任何項"); }
六.清空選擇項和設定不可用
//清空選擇 $("#c01-select").val(null).trigger("change"); $("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input標籤(預設就是本地資料),你可以用$("#c01-select").val('');來清空選項
//disabled $("#c01-select").prop("disabled", false);//可用 $("#c01-select").prop("disabled", true);//不可用
七.啟用多選
$("#c01-select").select2({ data:data, multiple: true });
多選演示:
由於部落格系統原因只能演示選擇
八.下面簡單說明新版與老版對比
1.結果回撥和選中回撥名稱:formatResult、formatSelection(老版);templateResult、templateSelection(新版)
2.初始化:
//老版,注意如果初始化時文字框中本身沒有值(為空),則不會觸發該方法
initSelection: function (element, callback) { var id = $(element).val(); var data = { id: id, text: id};//這裡是初始化的資料,你可以通過id來從伺服器上獲取(ajax),再裝載進去 callback(data); }
//新版,直接給select新增option
$("#id").append(new Option("Jquery", 10001, false, true)); //或者 $("#id").append("<option value='10001'>Jquery</option>");
3.獲取或設定值:select2("val")(老版);$("select").val()(新版)
推薦使用
var res = $("#id").select2("data"); //返回陣列,單選就取res[0];好處是不進可以獲取id、text還可以獲取其他屬性,如res[0].names
4.停用或啟用:$("select").enable(false);(老版);$("select").prop("disabled", true);(新版)
5.主題樣式:新版的樣式已經更新,但如果想使用老版樣式則可以設定 theme: "classic"
Select2控制元件介紹
我們在整個框架裡面,用到了很多Select2控制元件來處理內容的顯示,包括單選的下拉列表(包括級聯選擇框)、複選的下拉列表、樹形下拉列表等方式,介面效果如下所示。
1)編輯介面下的省份、城市、所在行政區的級聯介面效果,選擇省份,會載入對應省份下的城市,選擇城市,會繼續載入城市下的行政區,從而實現多級關聯的下拉列表效果。
2)編輯介面下的多項選擇下拉列表
但我們選擇其中的內容的時候,系統自動顯示出沒有選擇的列表資料,非常直觀友好,如下所示。
3)樹形列表的下拉列表
有時候,我們的一些資料可能有層次關係的,如所屬機構、上層列表等等。
2、Select2控制元件的實際使用程式碼分析
1)基礎介面程式碼及操作
使用select2控制元件,一般是在常規的select控制元件上,設定一下即可(設定它的class為select2)。
<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">重要級別</label> <div class="col-md-8"> <select id="Importance" name="Importance" class="form-control select2" placeholder="重要級別..."></select> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">認可程度</label> <div class="col-md-8"> <select id="Recognition" name="Recognition" class="form-control select2" placeholder="認可程度..."></select> </div> </div> </div>
如果是固定列表,那麼也就是設定它的Option內容即可,如下所示。
<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-4">吸菸</label> <div class="col-md-8"> <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸菸..."> <option>吸菸</option> <option>不吸菸</option> </select> </div> </div> </div>
簡單的select2控制元件初始化程式碼如下所示。
$(document).ready(function() { $(".js-example-basic-single").select2(); });
一般情況下,如果允許複選多個專案,那麼設定 multiple="multiple"即可,如下程式碼所示。
<select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>
2)非同步資料繫結操作
一般情況下,我們的select控制元件的資料,是從資料庫裡面動態載入的,因此一般是通過Ajax方式獲取資料並進行繫結即可。
基於程式碼可重用性的考慮,我們編寫一個公用的JS函式,用來減少繫結操作的程式碼,提高程式碼重用性。
//繫結字典內容到指定的Select控制元件 function BindSelect(ctrlName, url) { var control = $('#' + ctrlName); //設定Select2的處理 control.select2({ allowClear: true, formatResult: formatResult, formatSelection: formatSelection, escapeMarkup: function (m) { return m; } }); //繫結Ajax的內容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data, function (i, item) { control.append("<option value='" + item.Value + "'> " + item.Text + "</option>"); }); }); }
這樣,繫結公用字典模組的資料,也就可以通過下面進一步封裝處理即可。
//繫結字典內容到指定的控制元件 function BindDictItem(ctrlName, dictTypeName) { var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName); BindSelect(ctrlName, url); }
這樣我們初始化Select2 控制元件,並動態繫結對應的字典值或者其他資料,則可以通過下面初始化程式碼即可實現。其中BindDictItem就是直接繫結字典內容的操作,BindSelect則是根據URL進行資料的獲取並繫結,而$("#Province").on("change", function (e) {});這樣的函式處理,就是處理選擇內容變化的聯動操作了。
//初始化字典資訊(下拉列表) function InitDictItem() { //部分賦值參考 BindDictItem("Area","市場分割槽"); BindDictItem("Industry", "客戶行業"); BindDictItem("Grade","客戶級別"); BindDictItem("CustomerType", "客戶型別"); BindDictItem("Source", "客戶來源"); BindDictItem("CreditStatus", "信用等級"); BindDictItem("Stage","客戶階段"); BindDictItem("Status", "客戶狀態"); BindDictItem("Importance", "重要級別"); // 繫結省份、城市、行政區(聯動處理) BindSelect("Province", "/Province/GetAllProvinceNameDictJson"); $("#Province").on("change", function (e) { var provinceName = $("#Province").val(); BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName); }); $("#City").on("change", function (e) { var cityName = $("#City").val(); BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName); }); }
而其中MVC控制器返回的資料,我們是返回一個JSON資料列表給前端頁面的,他們的資料格式如下所示。
[ { "Text": "", "Value": "" }, { "Text": "學術會議", "Value": "學術會議" }, { "Text": "朋友介紹", "Value": "朋友介紹" }, { "Text": "廣告媒體", "Value": "廣告媒體" } ]
這樣前端頁面繫結Select2控制元件的時候,就使用了JSON物件的屬性即可。
//繫結Ajax的內容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data, function (i, item) { control.append("<option value='" + item.Value + "'> " + item.Text + "</option>"); }); });
控制器的實現程式碼如下:
/// <summary> /// 根據字典型別獲取對應的字典資料,方便UI控制元件的繫結 /// </summary> /// <param name="dictTypeName">字典型別名稱</param> /// <returns></returns> public ActionResult GetDictJson(string dictTypeName) { List<CListItem> treeList = new List<CListItem>(); CListItem pNode = new CListItem("", ""); treeList.Insert(0, pNode); Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName); foreach (string key in dict.Keys) { treeList.Add(new CListItem(key, dict[key])); } return ToJsonContent(treeList); }
3)樹形列表的繫結操作
對於屬性列表,如所屬公司、所屬部門機構等有層次性的資料,它的繫結操作也是類似的,如下程式碼所示。
//繫結新增介面的公司、部門、直屬經理 BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="[email protected]["UserId"]); $("#Company_ID").on("change", function (e) { var companyid = $("#Company_ID").val(); BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid); }); $("#Dept_ID").on("change", function (e) { var deptid = $("#Dept_ID").val(); BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid); });
只是它們返回的資料,我們把它作為有縮排的顯示內容而已。
[ { "Text": "愛奇迪集團", "Value": "1" }, { "Text": " 廣州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]
或者如下所示
相關推薦
select2下拉框總結
在我的印象裡Select2有2個版本,最新版本有一些新的特性,並且更新了一下方法引數,比最初版本要好看一些,本文針對新版本。 官網:http://select2.github.io/ 由於部落格系統的原因,所以只能演示簡單的功能。 一.檔案需要引入select2.full.js、select2.m
layui下拉框總結
<optgroup label="學生時代"> <option value="你的工號" selected >你的工號</option> <option value="你最喜歡的老師">你最喜歡的老師</option> </optgrou
jQuery的select2下拉框的搜尋功能(使用select2外掛,方便簡單)
第一步: 引入我們用使用的外掛 jquery: select2: css: js: 第二步: 建立一個html頁面,body內容: <div> <select class="singleSelect" style="width: 200px;">
HTML select下拉框總結
做web專案的時候經常要用到select下拉框,下面是我整理的一些常用知識點 <!-- select元素屬性: multiple="multiple" 多選 disabled="disabled" 禁用 --> <select> <
使用select2下拉框ajax載入資料時,編輯賦值的方法
最近在做一個專案,專案地址: https://github.com/wangyuanjun008/wyj-parent.git 使用bootstrap select2下拉框外掛,ajax從後臺載入資料,儲存編輯後,不知道怎麼為下拉框賦值,下拉框程式碼如下:
select2下拉框外掛的使用,ajax請求
匯入樣式以及js。(jeesite已經在head.jsp中匯入,不用自己導) <link href="/jquery-select2/3.4/select2.min.css" rel="stylesheet" /> <script src="/jque
Select2元件下拉框的使用
angularjs與select2的下拉框使用 頁面引入js檔案 定義下拉框需要展示的資料 下拉框 頁面引入js檔案 <link rel="stylesheet" href="../plugins/selec
select2點選空白處 下拉框不消失
我看網上都說是父元素的高度不夠,但是我增加了父元素的高度。 方法1: 除錯發現點選所屬的父級容器,所以簡單處理就是可以在頁面加大高度,其實就是所在頁面的body第一層容器高度 <div class="container" style=" height:1000px;width:10
JQuery中使用select2外掛功能之自動完成下拉框動態載入匹配(本地資料與遠端資料結合)
前言 最近專案中遇到一個問題:前端載入頁面的時候某些頁面載入速度很慢,耗時很久;有些頁面載入的飛快;因為上面所說的頁面都是由同一個程式動態生成的,利用多執行緒同步機制完成不同的前端頁面;因此當時就斷定不是程式的大問題;應該是處理資料部分存在問題;在chrome瀏覽器一測;還真的是大資料的問題
生成下拉框的幾種方法總結——數據來源:枚舉
ati state 數據集 equal type() tty each 其中 sele 上節介紹數據來源是數據庫,這節介紹對枚舉進行數據獲取,形成下拉列表。 使用場景:某些狀態值獲取等,一般是數據量小,不需要在數據庫中進行維護的數據集 1、前提要有枚舉數據
js之select2.js下拉框
1、讓select2.js生效除了引用其CSS和js外,在使用的時候對下拉框進行引用。 $("#select2").select2({ placeholder:"請選擇", minimumResultsForSearch: -1,(設定下拉框的搜尋框不顯示) l
下拉框搜尋 select2 的使用[轉載]
原文地址: https://m.imooc.com/article/14472 使用場景是:一個下拉框有太多值 需要搜尋做匹配 載入檔案 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/
SELECT2自定義下拉框
SELECT2自定義下拉框 安裝 參考:Getting Started | Select2 - The jQuery replacement for select boxes 快速使用 html: <select class="js-ex
IOS動畫的使用方法總結-下拉框的簡單實現
第一種 CATransition *transition = [CATransition animation]; transition.duration = 0.4f;//時間
下拉框、下拉控制元件之Select2
一、Select2的功能簡介select2外掛給我們帶來了更加友好的互動方式,比如查詢控制元件展開後可通過關鍵字進行檢索例如: Select2也可以選擇帶查詢控制元件的選擇框... Select2更是支援多值選擇框... 二、如何使用
自己總結封裝了多級聯動下拉框js
/*支援多級下拉框 * data:查詢出來的所有資料,經過處理縮排的多級資料。子集用固定child, * pdata:選中的資料。字串用逗號隔開例:'4,57,557'如果沒有就空字串''; *
select2 支援多值下拉框
select2是一個非常好用的下拉框外掛,支援很多功能。 官方文件,例子:http://select2.github.io/ 現在記錄一下我在工作中用到的下拉框多值選擇。介面如下: html定義: 首先引入css,js庫 <link href="#sp
select2在火狐瀏覽器下下拉框不能搜尋的問題解決
select2下拉框不能搜尋的問題,一般是在模態框裡會發生的,加入如下js,就能解決這個問題了,我也是從其他地方看來的~(http://www.aicoffees.com/itshare/504201203.html) $.fn.modal.Constructor.pro
使用select2實現多選select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"&
select2下拉搜尋框匹配漢字全拼及首字母
(注:原文出自qq_33142257的部落格http://blog.csdn.net/qq_33142257/article/details/52575823) 最近,專案中需要在使用選擇搜尋框時進行漢字全拼及首字母的匹配搜尋。 專案使用了select2外掛,外掛本身不支援