首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

BootStrap与Select2使用小结

Posted in Javascript onFebruary 17, 2017

这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。

组件的下载地址以及API说明地址：

1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/

2、Select2参数文档说明：https://select2.github.io/options.html

3、Select2源码：https://github.com/select2/select2

效果图：

BootStrap与Select2使用小结

HTML代码：

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="/Content/jquery-3.1.1/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="/Content/bootstrap-3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<link href="/Content/bootstrap-3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="/Content/Select2_4.0.3/dist/js/select2.full.min.js" type="text/javascript"></script>
<link href="/Content/Select2_4.0.3/dist/css/select2.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="/Content/Select2_4.0.3/dist/js/i18n/zh-CN.js" type="text/javascript"></script>
<script src="/Content/jquery-placeholders-master/jquery.placeholders.min.js" type="text/javascript"></script>
@*<link href="http://select2.github.io/select2/bootstrap/css/bootstrap.css" rel="external nofollow" rel="stylesheet"/>
<link href="http://select2.github.io/font-awesome/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet"/>
<link rel="stylesheet" href="http://fanyi.youdao.com/web2/styles/all-packed.css?572877" rel="external nofollow" type="text/css"/>
<script src="http://select2.github.io/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://select2.github.io/select2/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="http://select2.github.io/select2-3.5.3/select2.css?ts=2015-08-29T20%3A09%3A48%2B00%3A00" rel="external nofollow" rel="stylesheet"/>
<script src="http://select2.github.io/select2-3.5.3/select2.js?ts=2015-08-29T20%3A09%3A48%2B00%3A00" type="text/javascript"></script>*@
<script type="text/javascript">
 $(document).ready(function () {
  $("#test").select2();
  //--------------------------------------
  $("#test_1").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   theme: "classic"
  });
  //------------------------------------------------------
  $("#test_2").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
   minimumInputLength: 10 //最小需要输入多少个字符才进行查询
  });
  //-------------------------------------------------------
  $("#test_3").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
   tags: true,
   maximumSelectionLength: 2 //设置最多可以选择多少项
  });
  //----------------------------------------------------
  $("#test_4").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
   allowClear: true,
   tags: true,
   maximumSelectionLength: 2, //设置最多可以选择多少项
   templateResult: function (state) {
   if (!state.id) {
     return state.text;
   }
    console.log(state.element.getAttribute("imgPath"));
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   }
  });
  //----------------------------------------------------------
  $("#test_5").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
    tags: true,
   maximumSelectionLength: 3, //设置最多可以选择多少项
   templateResult: function (state) {
    if (!state.id) {
     return state.text;
    }
    console.log(state.element.getAttribute("imgPath"));
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   }
  }).select2('val', ['HI', 'OR', 'NV']);
  //-------------------------------------------------------------------
  $("#test_6").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
   tags: true,
   maximumSelectionLength: 3, //设置最多可以选择多少项
   templateResult: function (state) {
    if (!state.id) {
     return state.text;
    }
    console.log(state.element.getAttribute("imgPath"));
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');
    return $state;
   }
  });
  //------------------------------------------------------------------
  $("#test_7").select2({
   ajax: {
    url: "Home/GetArea",
    dataType: 'json',
    delay: 250,
    data: function (params) {
     return {
      q: params.term, // search term
      page: params.page
     };
    },
    processResults: function (data, params) {
     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, 
   language: "zh-CN", //设置 提示语言
   maximumSelectionLength: 3, //设置最多可以选择多少项
   placeholder: "请选择",
   tags: false, //设置必须存在的选项 才能选中
   templateResult: function (repo) { //搜索到结果返回后执行，可以控制下拉选项的样式
    console.log("====================templateResult开始==================");
    console.log(repo);
    console.log("====================templateResult结束==================");
    if (repo.loading) return repo.text;
    var markup = "<div class=''>" + repo.text + "</div>";
    return markup;
   },
   templateSelection: function (repo) { //选中某一个选项是执行
    console.log("------------------templateSelection开始-------------------------------------");
    console.log( repo);
    console.log("------------------templateSelection结束-------------------------------------");
    return repo.full_name || repo.text;
   }
  });
  $("#btn").click(function() {
   alert($("#test_4").select2("val"));
  });
  //$("#test_5").prop("disabled", true); //设置是否可用
 });
 </script>
<article >
 默认
 <br/>
 <select style="width: 300px" id="test" class="form-control">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
 <br/>
 ----------------------------------------------------
 <br/>

    1、可搜索选项  

<select id="test_1" class="form-control">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
</article>
================================
<br/>

2、可搜索选项（有搜索关键字控制）

<article>
 <select id="test_2" class="form-control">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
</article>
===============================
<br/>

3、多选

<article>
 <select id="test_3" class="form-control js-example-placeholder-multiple js-states select2-hidden-accessible" multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
</article>
===============================
<br/>

4、图文选项

<article>
 <select id="test_4" class="js-example-templating js-states form-control select2-hidden-accessible" multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
</article>
<br/>
======================================
<br/>

5、默认选中某个选项

<article>
 <select id="test_5" class="form-control" multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone">
   <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
   <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
   <option value="CA" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
   <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
   <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
   <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
   <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
   <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
   <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
   <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
   <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
   <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
   <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
   <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
   <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
   <option value="AL">Alabama</option>
   <option value="AR">Arkansas</option>
   <option value="IL">Illinois</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="OK">Oklahoma</option>
   <option value="SD">South Dakota</option>
   <option value="TX">Texas</option>
   <option value="TN">Tennessee</option>
   <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="IN">Indiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="OH">Ohio</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
  </optgroup>
 </select>
</article>
<br/>
=========================================
<br/>

6、某些选项不能选中

<select id="test_6" class="form-control">
 <optgroup label="Alaskan/Hawaiian Time Zone">
  <option value="AK" imgPath="https://select2.github.io/vendor/images/flags/ak.png">Alaska</option>
  <option value="HI" imgPath="https://select2.github.io/vendor/images/flags/hi.png">Hawaii</option>
 </optgroup>
 <optgroup label="Pacific Time Zone">
  <option value="CA" disabled="disabled" imgPath="https://select2.github.io/vendor/images/flags/ca.png">California</option>
  <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/nv.png">Nevada</option>
  <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/or.png">Oregon</option>
  <option value="WA" disabled="disabled" imgPath="https://select2.github.io/vendor/images/flags/wa.png">Washington</option>
 </optgroup>
 <optgroup label="Mountain Time Zone">
  <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/az.png">Arizona</option>
  <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/co.png">Colorado</option>
  <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/id.png">Idaho</option>
  <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/mt.png">Montana</option>
  <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/ne.png">Nebraska</option>
  <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/nm.png">New Mexico</option>
  <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/nd.png">North Dakota</option>
  <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/ut.png">Utah</option>
  <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/wy.png">Wyoming</option>
 </optgroup>
 <optgroup label="Central Time Zone">
  <option value="AL">Alabama</option>
  <option value="AR">Arkansas</option>
  <option value="IL">Illinois</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="OK">Oklahoma</option>
  <option value="SD">South Dakota</option>
  <option value="TX">Texas</option>
  <option value="TN">Tennessee</option>
  <option value="WI">Wisconsin</option>
 </optgroup>
 <optgroup label="Eastern Time Zone">
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="IN">Indiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="OH">Ohio</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WV">West Virginia</option>
 </optgroup>
</select>
<br/>
======================================
<br/>

7、搜索动态加载下拉选项功能（即在用户输入搜索内容时动态去后台取数据）

<article>
 <select id="test_7" class=" form-control " multiple="multiple">
 </select>
</article>
<br/>
=========================================
<button id="btn">获取选中的值</button>

控制器action代码：

public class HomeController : Controller
 {
  public IEnumerable<string> areaList = new List<string>()
  { 
   "北京市", 
   "天津市",
   "重庆市",
   "上海市",
   "广州市", 
   "长沙", 
   "哈尔滨", 
   "长春",
   "杭州市", 
   "南京市",
   "福建市",
   "河北省", 
   "山西省", 
   "辽宁省", 
   "吉林省", 
   "黑龙江省",
   "江苏省",
   "浙江省", 
   "安徽省", 
   "福建省", 
   "江西省", 
   "山东省", 
   "河南省",
   "湖北省", 
   "湖南省",
   "广东省", 
   "海南省", 
   "四川省",
   "贵州省", 
   "云南省", 
   "陕西省", 
   "甘肃省",
   "青海省",
   "台湾省",
   "内蒙古自治区", 
   "广西壮族自治区", 
   "西藏自治区", 
   "宁夏回族自治区",
   "新疆维吾尔自治区", 
   "香港特别行政区", 
   "澳门特别行政区" 
  };
  public JsonResult GetArea(string q, string page)
  {
   var area = new { id = 1, name = "" };
   var lstRes = areaList.Select((t, i) => new Area
   {
    id = i,
    text = t,
    element = "element" + i
   });
   if (!string.IsNullOrEmpty(q.Trim()))
   {
    lstRes = lstRes.Where(x => x.text.Contains(q));
   }
   var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
   return Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet);
  }
  public ActionResult Index()
  {
   return View();
  }
 }
namespace Select2Demo.Models
{
 public class Area
 {
  public int id { get; set; }
  public string text { get; set; }
  public string element { get; set; }
 }
}

以上所述是小编给大家介绍的BootStrap与Select2使用小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap与Select2使用小结

- Author -

linYongJie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
js更优雅的兼容
Aug 12 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
小程序：授权、登录、session_key、unionId的详解
May 15 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 #Javascript
Vue.js原理分析之observer模块详解
Feb 17 #Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 #Javascript
Bootstrap表单使用方法详解
Feb 17 #Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 #Javascript
javascript基础知识之html5轮播图实例讲解（44）
Feb 17 #Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 #Javascript
大脑(1) DNA(2) 数据(1) 嘧啶碱基(2) 陨石(1) RNA(2) 富碳陨石(1) 美国航天局(1) 火星(2) iPhone(1)
You might like
PHP生成器简单实例
2015/05/13 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
php use和include区别总结
2019/10/13 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
python删除指定类型（或非指定）的文件实例详解
2015/07/06 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python中if及if-else如何使用
2020/06/02 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
天美时手表加拿大官网：Timex加拿大
2016/09/01 全球购物
德国旅游网站：weg.de
2018/06/03 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
医学生自荐信范文
2013/12/03 职场文书
责任书范本
2014/08/25 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
体育教师教学随笔
2015/08/15 职场文书