强大的下拉框插件-Select2 25th/032016Tags jquery插件 美化witten by awh521 返回列表select2是一个可以给你定制支持搜索、标签、远程数据集，无限滚动，以及其他常用功能的一个下拉框美化插件。总之，功能很强大。 ###配置 ```html <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script> ``` ###基本使用 - ```javascript <script type="text/javascript"> $('select').select2(); </script> ``` - ####单选框 ```javascript <script type="text/javascript"> $(document).ready(function() { $(".js-example-basic-single").select2(); }); </script> ``` ```html <select class="js-example-basic-single"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> ``` - ####多选框 ```javscript <script type="text/javascript"> $(".js-example-basic-multiple").select2(); </script> ``` ```html <select class="js-example-basic-multiple" multiple="multiple"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> ``` - ####提示信息 ```javascript $(".js-example-placeholder-single").select2({ placeholder: "Select a state", allowClear: true //可以删除 }); $(".js-example-placeholder-multiple").select2({ placeholder: "Select a state" }); ``` ###加载数据 - ####加载数组 ```javascript <script type="text/javascript"> var data = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; $(".js-example-data-array").select2({ data: data }) $(".js-example-data-array-selected").select2({ data: data }) </script> <select class="js-example-data-array"></select> <select class="js-example-data-array-selected"> <option value="2" selected="selected">duplicate</option> </select> ``` ####加载远程数据 ```javascript $(".js-data-example-ajax").select2({ ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (data, params) { // parse the results into the format expected by Select2 // since we are using custom formatting functions we do not need to // alter the remote JSON data, except to indicate that infinite // scrolling can be used params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, // omitted for brevity, see the source of this page templateSelection: formatRepoSelection // omitted for brevity, see the source of this page }); ``` ####禁用模式 ```javascript $(".js-programmatic-enable").on("click", function () { $(".js-example-disabled").prop("disabled", false); $(".js-example-disabled-multi").prop("disabled", false); }); $(".js-programmatic-disable").on("click", function () { $(".js-example-disabled").prop("disabled", true); $(".js-example-disabled-multi").prop("disabled", true); }); ``` ####禁用结果 ```html <select class="js-example-disabled-results"> <option value="one">First</option> <option value="two" disabled="disabled">Second (disabled)</option> <option value="three">Third</option> </select> ``` ####限制个数 ```javascript $(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2 }); ``` ####隐藏搜索框 ```javascript $(".js-example-basic-hide-search").select2({ minimumResultsForSearch: Infinity }); ``` ###编程控制 - ####DOM事件 ``` change //选中或删除触发 select2:open //下拉框打开触发 select2:opening //下拉框打开之前 select2:close //下拉框关闭 select2:closing //下拉框关闭之前 select2:select //选中结果触发 select2:selecting //选中之前 select2:unselect //结果未选中 select2:unselecting //结果未选中之前 ``` ```javascript var $eventLog = $(".js-event-log"); var $eventSelect = $(".js-example-events"); $eventSelect.on("select2:open", function (e) { log("select2:open", e); }); $eventSelect.on("select2:close", function (e) { log("select2:close", e); }); $eventSelect.on("select2:select", function (e) { log("select2:select", e); }); $eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); }); $eventSelect.on("change", function (e) { log("change"); }); function log (name, evt) { if (!evt) { var args = "{}"; } else { var args = JSON.stringify(evt.params, function (key, value) { if (value && value.nodeName) return "[DOM node]"; if (value instanceof $.Event) return "[$.Event]"; return value; }); } var $e = $("<li>" + name + " -> " + args + "</li>"); $eventLog.append($e); $e.animate({ opacity: 1 }, 10000, 'linear', function () { $e.animate({ opacity: 0 }, 2000, 'linear', function () { $e.remove(); }); }); } ``` - ####自定义控制 ```javascript var $example = $(".js-example-programmatic").select2(); var $exampleMulti = $(".js-example-programmatic-multi").select2(); $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); }); $(".js-programmatic-open").on("click", function () { $example.select2("open"); }); $(".js-programmatic-close").on("click", function () { $example.select2("close"); }); $(".js-programmatic-init").on("click", function () { $example.select2(); }); $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); }); $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); }); ``` ###标签支持 ```javascript $(".js-example-tags").select2({ tags: true }) ``` ###自动标记 当我们输入值匹配成功后 键入空格就会自动标签化 ```javascript $(".js-example-tokenizer").select2({ tags: true, tokenSeparators: [',', ' '] }) ``` ###自定义查找匹配 ```javascript function matchStart (term, text) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { return true; } return false; } $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { $(".js-example-matcher-start").select2({ matcher: oldMatcher(matchStart) }); }); ````
只有登录之后才可以评论，请点击这里进行登录
全部评论: 0条