强大的下拉框插件-Select2

25th/032016

Tags

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

强大的下拉框插件-Select2

Tags

全部评论: 0条

神仙土豆分享单曲

单曲Star Sky (Instrumental) - Thomas J. Bergersen

南霸天分享单曲

单曲因为大家都离开了…

Bishop888888 分享专辑

专辑战场上的呐喊

Little vagrant 转发

单曲寂静山林

ADDBr 分享单曲

单曲El Condor Pasa 老鹰之歌

liufuqiang 分享单曲

单曲Call of the Nature 旷野的呼唤

铃儿响叮当分享单曲

单曲Paradiesvogel 天堂鸟

chaipeng2020 分享专辑

专辑神秘园之歌

自由的呼吸分享歌单

歌单一尘不染

婞鍢的紐釦分享单曲

单曲春风を梦见て

强大的下拉框插件-Select2

Tags

全部评论: 0条

或使用第三方帐号登录

使用第三方帐号登录