jQuery插件:强大的下拉框插件-Select2

主页:https://select2.github.io/

项目:https://github.com/select2/select2

实例:https://select2.github.io/examples.html

下载:select2-4.0.3

select2是一个可以给你定制支持搜索、标签、远程数据集,无限滚动,以及其他常用功能的一个下拉框美化插件。总之,功能很强大。

配置

<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>

基本使用

<script type="text/javascript">
$('select').select2();
</script>

单选框

<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
 ...
<option value="WY">Wyoming</option>
</select>

多选框

<script type="text/javascript">
 $(".js-example-basic-multiple").select2();
 </script>
<select class="js-example-basic-multiple" multiple="multiple">
 <option value="AL">Alabama</option>
 ...
 <option value="WY">Wyoming</option>
 </select>

提示信息

 $(".js-example-placeholder-single").select2({
 placeholder: "Select a state",
 allowClear: true //可以删除
 });
 $(".js-example-placeholder-multiple").select2({
 placeholder: "Select a state"
 });

加载数据

1. 加载数组

 <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>

2. 加载远程数据

$(".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
});

3. 禁用模式

$(".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);
});

4. 禁用结果

<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>

5. 限制个数

$(".js-example-basic-multiple-limit").select2({
 maximumSelectionLength: 2
});

6. 隐藏搜索框

$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});

编程控制

1. DOM事件

change //选中或删除触发
select2:open //下拉框打开触发
select2:opening //下拉框打开之前
select2:close //下拉框关闭
select2:closing //下拉框关闭之前
select2:select //选中结果触发
select2:selecting //选中之前
select2:unselect //结果未选中
select2:unselecting //结果未选中之前
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();
 });
});
}

2. 自定义控制

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"); });

3. 标签支持

$(".js-example-tags").select2({
 tags: true
})

4. 自动标记

当我们输入值匹配成功后 键入空格就会自动标签化

$(".js-example-tokenizer").select2({
 tags: true,
 tokenSeparators: [',', ' ']
})

5. 自定义查找匹配

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)
 });
});

 

本文:jQuery插件:强大的下拉框插件-Select2

Leave a Reply