首页
所有分类
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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
js 实现无干扰阴影效果 简单好用（附文件下载）
Dec 27 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
原生js实现瀑布流效果
Mar 09 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) 数据合并(1) Carbon(1) 逻辑函数(1) element-ui(1) 模板引擎(1) pongo2(1) Dijkstra(1) 优先队列(1) 动态代理(1)
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
高质量PHP代码的50个实用技巧必备（下）
2016/01/22 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
关于php支持的协议与封装协议总结（推荐）
2017/11/17 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果（2）
2017/02/20 Javascript
jQuery取得元素标签名称小结（附代码）
2017/08/16 jQuery
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
Python处理Excel文件实例代码
2017/06/20 Python
如何使用python操作vmware
2019/07/27 Python
Lookfantastic日本官网：英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
思想品德自我鉴定
2013/10/12 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
年终晚会主持词
2014/03/25 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
丧事答谢词
2015/01/05 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
68句权威创业名言
2019/08/26 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
python 安全地删除列表元素的方法
2022/03/16 Python