html select美化模擬jquery插件select2.js

代碼展示：http://www.51xuediannao.com/demo.php

代碼說明:

select2.js是一個html select美化模擬類jquery插件，但是select2.js又遠非簡單的模擬美化那么簡單，它還具有搜索功能，多選功能（可限制選擇數量），ajax方式加載數據，可以設置placeholder，
可以設置禁用狀態disabled，並且設置非常簡單，如：$(".js-example-disabled").prop("disabled", false);

select2.js默認值設置：$("#select2").val("1").trigger("change");  多選的默認值可以使用$("#select2").val(["1","2"]).trigger("change");  這樣傳遞數組過去。

select2還有豐富的自定義事件

$("#select2").on("select2:open", function (e) { log("select2:open", e); });

$("#select2").on("select2:close", function (e) { log("select2:close", e); });

$("#select2").on("select2:select", function (e) { log("select2:select", e); });

$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });

$("#select2").on("change", function (e) { log("change"); });

更多豐富的select2用法請參考https://select2.github.io/examples.html，也會在稍后給出實際應用中的一些例子，和一些方便調用的小花招。

select2小花招：自己定義當前選中的selected值，我們在select2的節點上給出一個<select class="test1" data-selected="2"> 看紅色部分，然后我們就可以在設置選中值得時候就可以使用如下js代碼，

$("#select2").val(function(){

                  return $(this).data("selected")

              }).trigger("change");

利用val()接收一個函數，而且可以利用 this