標籤：== oct ctrl 繁體 美化 play 點擊其他 tle 配置網站
標籤：color dom layui href 預設事件 替換 each ase options
最近項目中使用到了select2來美化和豐富下拉框的功能，這款外掛程式功能豐富，使用簡單，可以對已經產生的select標籤進行改造，也可以對json資料直接產生下拉式清單，包括一些檢索功能，非同步載入功能等，能夠很大程度的滿足視覺和互動的要求。是開發過程中不可多得的一款利器。
官方文檔是英文文檔且是以問答形式展示他的可配置項的，可能作者會覺得這樣做比較有趣，但是對於渣渣英語的我來說，肯定是一種煎熬， 現在和大家分享一下在開發過程中的一些問題：
一、使用篇1.根據官方文檔的提示配置了placeholder卻不起作用；1.1 你需要在select標籤中放置一個空的option標籤，用來做placeholder文字的儲存容器；
1.2 你要在select標籤上添加一個屬性“data-placeholder=‘ 你要提示的placeholder ‘”
1.3 最後才是在select2 的配置項中加入配置項"placeholder: ‘請選擇‘,"
而文檔中卻沒有提到這些東西，小小的一個功能藏這麼多陷阱，真是心塞；
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bower_components/select2/dist/css/select2.css"> </head> <body> <select data-tags="true" data-placeholder="請選擇" > <option></option> <option value="1">1111</option> <option value="2">2222</option> <option value="3">3333</option> <option value="4">4444</option> </select> </body> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/select2/dist/js/select2.min.js"></script> <script> $("select").select2({ placeholder: "請選擇", allowClear: 0, minimumResultsForSearch: Infinity, width:200 }); </script></html>View Code2. 取消下拉框的檢索功能；
配置項為 { minimumResultsForSearch: Infinity, }
二、改造篇 一.下拉框選擇過程中彈框確認該類事件可以理解為在select2對象在操作的各個階段的鉤子函數，當然官方為我們配置相應的介面，允許我們在開啟，關閉，選前，選中，選後等時間階段來處理我們配置的回呼函數；
這類事件（點擊查看）可以通過在on綁定在select2執行個體上，一般性的功能可以在回呼函數中處理；
$("select").select2({ placeholder: ‘請選擇‘ }).on("select2:selecting",function(e){ alert(" 我選中了 ") });
現在有一個棘手的問題，我需要在選中的一瞬間進行彈框提示，然後不允許select2的其他事件繼續向執行，然後經過彈框確認後再繼續向下執行，此時彈框不能做出任何改變；
首先在點擊模態框的過程中，不能讓select下拉框關閉：
我們需要進行2步驟操作：
1.1 在彈框出來後，除了點擊“確認”和“取消”按鈕，點擊其他地方不能關閉下拉框；
select2會在其建構函式BaseSelection的原型上定義關閉方法，關閉方法中使用自訂的事件關聯到對應id的盒子上，我們可以在這個方法中來阻斷關閉操作；
BaseSelection.prototype._attachCloseHandler = function (container) { var self = this; $(document.body).on(‘mousedown.select2.‘ + container.id, function (e) { var $target = $(e.target); var $select = $target.closest(‘.select2‘); var $all = $(‘.select2.select2-container--open‘); $all.each(function () { var $this = $(this); if (this == $select[0]) { return; } var $element = $this.data(‘element‘); //在模態框存在的條件下，禁止使用select2的關閉功能（這裡可以根據你使用的類來靈活操作） var mask = $(".layui-layer-shade"); if(mask.length == 0){ $element.select2(‘close‘); } }); }); };
1.2 在選擇select2框下的內容時，不能立即執行回呼函數，回呼函數必須放在“確認”按鈕點擊後處理；
通常在最初程式設計的時候，正確的做法應該是把後續函數設計在layer的確認回呼函數中，我本來不打算使用select2外掛程式，但是產品的世界你懂得，變化是隨時隨地發生的。
最初的函數是通過監控select標籤的change狀態來鏈式觸發的，這一點很重要，如果想把目標回呼函數放到select2的鉤子函數中，會直接執行，不符合我們彈框進行確認取消的目的；
如何?本地的這種非同步作業？其實我們需要使用一個中間函數，讓這個函數去觸發select標籤的change事件。
var selectWebNamer = $(".selectWebName").select2({ myMsg:‘無可配置網站‘, //此處不是select的配置項後面解說 placeholder: ‘請選擇‘ }).on("select2:selecting",function(e){ if(data.siteList.length==0){ return false; } if(!that.status.canChange){ that._confirmChange(e, that._queryParam,this); } });
第一件事情：阻止預設事件 event.preventDefault(); 我們的非同步函數我們自己來控制，select2取消你自作主張的行為；
此時綁定在select2:selecting 事件上的函數會去調起彈框視窗；
that._queryParam 是中間函數，這個函數會在確認按鈕後執行；下一步會觸發真正的select標籤change事件；
而event事件是select2封裝後的事件，這個封裝好的事件可以讓我們跟蹤到真正需要點擊的select 標籤；所以在 that._queryParam 中需要帶入這個event對象；
在確認或取消點擊的一瞬間select2的下拉框要關閉，所以此時通過指正傳入這個select2對象也是有必要的；
_confirmChange:function(event,callback,$this){ var that = this; event.preventDefault(); $(".layui-layer-shade").remove(); layer.closeAll(); layer.open({ type: 1, title: ‘返回‘, area: [‘500px‘, ‘270px‘], btn: [ ‘確認‘,‘取消‘], closeBtn: 2, content: $(‘#changeMsg‘), btn1: function (index) { layer.closeAll(); if(callback){ callback(event); $($this).select2(‘close‘); that.status.canChange = true; } }, btn2: function (index) { layer.close(index); $($this).select2(‘close‘); } }); //} },
event對象中包含了我們現在操作的dom對象，和當前選中的option上的值;
jquery 如何選中 select中某個option?，用的不多，可能大家都忘記了吧。
此時，我們的change事件被觸發了，就和我們手動點擊了option 一樣，後續的代碼可以順利執行了。
_queryParam:function(event){ if(!event){ return false; } var target = event.currentTarget; var name = event.params.args.data.text; $(target).val(name).trigger("change"); }, 二、如何修改select2的提示資訊
採用select2執行個體化後如果後台沒有給我們返回資料的話，select2會友好的在下拉框處提示“No Result Is Fonud”（貌似是這樣）
然後，可愛的互動妹妹說，不行，我不要看英文，我不認識。。。。。 好吧，你贏。
檢查了一下，好像沒有這個提示資訊配置api，於是我就邪惡的找到引入檔案中的select2.min.js ctrl+R(“No Result Is Fonud” --------" 別瞎拉了，後台沒返回")
ok 懶得改，就這樣。
過了一會兒互動妹妹不幹了，怎麼都是“別瞎拉了，後台沒返回”，我要的是“呵呵，我不想給你返回 ”，“ 返回過程中被恐龍吃掉了 ”，“你太醜了，不給你看”。。。。。。。
好吧好吧，我給你配置成你想說啥說啥還不行嗎。
看了一下文檔，作者一看就是高手提供了10來種語言的提示資訊，原來人家本來就有中文版的“別瞎拉了，你後台沒返回”，還有英文版的“don`t blind pull la , then didn‘t give us ”,還有日文版的“ 雅蠛蝶雅蠛蝶” ，可恨的是zh-CH.js和zh-TW.js 是分別簡體和繁體的，丫的，搞事情。
如果沒有要求提示不一樣的內容，直接在配置項中設定language就可以使用對應的語言；
如果想要提示不應的內容，需要手動改造一下，讓它去替換。
我們找到與結果相關的Result模組，並找到其原型上的append方法；
我們在option上使用的欄位是myMsg ,來配置本下拉框的無內容提示，
原來的提示條件最好給他保留 如果我沒有配置myMsg欄位那你就按照你原來的處理，如果我有配置myMsg欄位，你就要按照我的來。
if( data.results == null || data.results.length === 0)&& !myMsg) { 你原來怎麼處理就怎麼處理 }
else if((data.results == null || data.results.length === 0)&& !!myMsg){ 在result:message 時間的參數中加入我們的資訊 }
Results.prototype.append = function (data) { this.hideLoading(); var myMsg = this.options.options.myMsg; //擷取提示文字 var $options = []; if ((data.results == null || data.results.length === 0)&& !myMsg) { //按你的來 if (this.$results.children().length === 0) { this.trigger(‘results:message‘, { message: ‘noResults‘ }); } return; }else if((data.results == null || data.results.length === 0)&& !!myMsg){ //按我的來 if (this.$results.children().length === 0) { this.trigger(‘results:message‘, { message: ‘noResults‘, myMessage:myMsg }); } return; } data.results = this.sort(data.results); for (var d = 0; d < data.results.length; d++) { var item = data.results[d]; var $option = this.option(item); $options.push($option); } this.$results.append($options); };
然後順藤摸瓜，從results:message事件上摸到展示displayMessage方法上，然後我們判斷一下 “myMessage” 帶過來了沒有，如果帶過來了，那就用我們的提示
Results.prototype.displayMessage = function (params) { var escapeMarkup = this.options.get(‘escapeMarkup‘); this.clear(); this.hideLoading(); var $message = $( ‘<li role="treeitem" aria-live="assertive"‘ + ‘ class="select2-results__option"></li>‘ ); var message = this.options.get(‘translations‘).get(params.message); $message.append( escapeMarkup( params.myMessage? params.myMessage:message(params.args) //決定用我們的提示還是它自己的提示。 ) ); $message[0].className += ‘ select2-results__message‘; this.$results.append($message); };
ok 至此，互動妹子的需求都實現了，select2的本次改造也結束了。
select2 如何自訂提示資訊
標籤：color dom layui href 預設事件 替換 each ase options
原文：http://www.cnblogs.com/wuhaozhou/p/7449661.html
var selectWebNamer = $(".selectWebName").select2({ myMsg:‘無可配置網站‘, //此處不是select的配置項後面解說 placeholder: ‘請選擇‘ }).on("select2:selecting",function(e){ if(data.siteList.length==0){ return false; } if(!that.status.canChange){ that._confirmChange(e, that._queryParam,this); } });
Results.prototype.append = function (data) { this.hideLoading(); var myMsg = this.options.options.myMsg; //擷取提示文字 var $options = []; if ((data.results == null || data.results.length === 0)&& !myMsg) { //按你的來 if (this.$results.children().length === 0) { this.trigger(‘results:message‘, { message: ‘noResults‘ }); } return; }else if((data.results == null || data.results.length === 0)&& !!myMsg){ //按我的來 if (this.$results.children().length === 0) { this.trigger(‘results:message‘, { message: ‘noResults‘, myMessage:myMsg }); } return; } data.results = this.sort(data.results); for (var d = 0; d < data.results.length; d++) { var item = data.results[d]; var $option = this.option(item); $options.push($option); } this.$results.append($options); };
然後順藤摸瓜，從results:message事件上摸到展示displayMessage方法上，然後我們判斷一下 “myMessage” 帶過來了沒有，如果帶過來了，那就用我們的提示
Results.prototype.displayMessage = function (params) { var escapeMarkup = this.options.get(‘escapeMarkup‘); this.clear(); this.hideLoading(); var $message = $( ‘<li role="treeitem" aria-live="assertive"‘ + ‘ class="select2-results__option"></li>‘ ); var message = this.options.get(‘translations‘).get(params.message); $message.append( escapeMarkup( params.myMessage? params.myMessage:message(params.args) //決定用我們的提示還是它自己的提示。 ) ); $message[0].className += ‘ select2-results__message‘; this.$results.append($message); };
else if((data.results == null || data.results.length === 0)&& !!myMsg){ 在result:message 時間的參數中加入我們的資訊 }
if( data.results == null || data.results.length === 0)&& !myMsg) { 你原來怎麼處理就怎麼處理 }
原來的提示條件最好給他保留 如果我沒有配置myMsg欄位那你就按照你原來的處理，如果我有配置myMsg欄位，你就要按照我的來。
我們在option上使用的欄位是myMsg ,來配置本下拉框的無內容提示，
我們找到與結果相關的Result模組，並找到其原型上的append方法；
如果想要提示不應的內容，需要手動改造一下，讓它去替換。
如果沒有要求提示不一樣的內容，直接在配置項中設定language就可以使用對應的語言；
看了一下文檔，作者一看就是高手提供了10來種語言的提示資訊，原來人家本來就有中文版的“別瞎拉了，你後台沒返回”，還有英文版的“don`t blind pull la , then didn‘t give us ”,還有日文版的“ 雅蠛蝶雅蠛蝶” ，可恨的是zh-CH.js和zh-TW.js 是分別簡體和繁體的，丫的，搞事情。
二、如何修改select2的提示資訊採用select2執行個體化後如果後台沒有給我們返回資料的話，select2會友好的在下拉框處提示“No Result Is Fonud”（貌似是這樣）
_queryParam:function(event){ if(!event){ return false; } var target = event.currentTarget; var name = event.params.args.data.text; $(target).val(name).trigger("change"); },
此時，我們的change事件被觸發了，就和我們手動點擊了option 一樣，後續的代碼可以順利執行了。
jquery 如何選中 select中某個option?，用的不多，可能大家都忘記了吧。
event對象中包含了我們現在操作的dom對象，和當前選中的option上的值;
_confirmChange:function(event,callback,$this){ var that = this; event.preventDefault(); $(".layui-layer-shade").remove(); layer.closeAll(); layer.open({ type: 1, title: ‘返回‘, area: [‘500px‘, ‘270px‘], btn: [ ‘確認‘,‘取消‘], closeBtn: 2, content: $(‘#changeMsg‘), btn1: function (index) { layer.closeAll(); if(callback){ callback(event); $($this).select2(‘close‘); that.status.canChange = true; } }, btn2: function (index) { layer.close(index); $($this).select2(‘close‘); } }); //} },
在確認或取消點擊的一瞬間select2的下拉框要關閉，所以此時通過指正傳入這個select2對象也是有必要的；
而event事件是select2封裝後的事件，這個封裝好的事件可以讓我們跟蹤到真正需要點擊的select 標籤；所以在 that._queryParam 中需要帶入這個event對象；
that._queryParam 是中間函數，這個函數會在確認按鈕後執行；下一步會觸發真正的select標籤change事件；
此時綁定在select2:selecting 事件上的函數會去調起彈框視窗；
第一件事情：阻止預設事件 event.preventDefault(); 我們的非同步函數我們自己來控制，select2取消你自作主張的行為；
如何?本地的這種非同步作業？其實我們需要使用一個中間函數，讓這個函數去觸發select標籤的change事件。
最初的函數是通過監控select標籤的change狀態來鏈式觸發的，這一點很重要，如果想把目標回呼函數放到select2的鉤子函數中，會直接執行，不符合我們彈框進行確認取消的目的；
通常在最初程式設計的時候，正確的做法應該是把後續函數設計在layer的確認回呼函數中，我本來不打算使用select2外掛程式，但是產品的世界你懂得，變化是隨時隨地發生的。
1.2 在選擇select2框下的內容時，不能立即執行回呼函數，回呼函數必須放在“確認”按鈕點擊後處理；
BaseSelection.prototype._attachCloseHandler = function (container) { var self = this; $(document.body).on(‘mousedown.select2.‘ + container.id, function (e) { var $target = $(e.target); var $select = $target.closest(‘.select2‘); var $all = $(‘.select2.select2-container--open‘); $all.each(function () { var $this = $(this); if (this == $select[0]) { return; } var $element = $this.data(‘element‘); //在模態框存在的條件下，禁止使用select2的關閉功能（這裡可以根據你使用的類來靈活操作） var mask = $(".layui-layer-shade"); if(mask.length == 0){ $element.select2(‘close‘); } }); }); };
select2會在其建構函式BaseSelection的原型上定義關閉方法，關閉方法中使用自訂的事件關聯到對應id的盒子上，我們可以在這個方法中來阻斷關閉操作；
1.1 在彈框出來後，除了點擊“確認”和“取消”按鈕，點擊其他地方不能關閉下拉框；
我們需要進行2步驟操作：
首先在點擊模態框的過程中，不能讓select下拉框關閉：
現在有一個棘手的問題，我需要在選中的一瞬間進行彈框提示，然後不允許select2的其他事件繼續向執行，然後經過彈框確認後再繼續向下執行，此時彈框不能做出任何改變；
$("select").select2({ placeholder: ‘請選擇‘ }).on("select2:selecting",function(e){ alert(" 我選中了 ") });
這類事件（點擊查看）可以通過在on綁定在select2執行個體上，一般性的功能可以在回呼函數中處理；
該類事件可以理解為在select2對象在操作的各個階段的鉤子函數，當然官方為我們配置相應的介面，允許我們在開啟，關閉，選前，選中，選後等時間階段來處理我們配置的回呼函數；
一.下拉框選擇過程中彈框確認select2 如何自訂提示資訊-布布扣-bubuko.com
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
