select2 属性标签整理

前言：由于自己感觉自己学的越来越杂，很多东西使用之后就忘掉了很大一部分，所以最近决定把自己学的东西通过博客的方式整理出来，看能不能把这些知识都串通起来

 

SELECT2 标签

简单的关于以下API地址的翻译

API地址 https://select2.github.io/examples.html

 

 

select2标签和传统的select标签好像没有多大的差别,但是它还是在select基础上增加了些属性

1、多个选择框（属性 multiple="multiple")

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
增加此属性后，select选择变成多选

2、选择标签框 

你可以在一个标签中使用select标签，比如label

<label for="id_label_multiple">
  Click this to highlight the multiple select element

  <select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
</label>

 

3、占位符 placeholder

这其实是h5的一个属性，添加此属性时在未选择时选择框中会出现placeholder所对应的值

4、加载数组数据

简单的说:select2提供了一个加载局部数组的方法，你只要提供一个选项标记，提供数组数据的初始选择就可以了

 

Select2提供了一种方法，从

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

5、加载远程数据

6、