首页
所有分类
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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javascript下string.format函数补充
Aug 24 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
js实现点击选项置顶动画效果
Aug 25 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) sql模式(1) 逻辑备份(1) 远程连接(2) lua(3) geoserver(1) 异步机制(1) into outfile(1) 匹配(1) 全表扫描(1)
You might like
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
两个Javascript小tip资料
2010/11/23 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python函数返回值实例分析
2015/06/08 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
简单了解python单例模式的几种写法
2019/07/01 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站：Lentiamo.es
2020/06/11 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
办理信用卡工作证明
2014/01/11 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
师德师风演讲稿
2014/05/05 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2014年超市工作总结
2014/11/19 职场文书
指导教师推荐意见
2015/06/05 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
MySQL 数据表操作
2022/05/04 MySQL