欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap與Select2使用小結(jié)

 更新時間：2017年02月17日 09:08:55   作者：linYongJie  
這個select2組件的功能確實(shí)很強(qiáng)大，可以將圖片放入到select里面隨著文字一起顯示。接下來通過本文給大家分享BootStrap與Select2使用小結(jié)，需要的朋友參考下

這個select2組件的功能確實(shí)很強(qiáng)大，可以將圖片放入到select里面隨著文字一起顯示。

組件的下載地址以及API說明地址：

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

2、Select2參數(shù)文檔說明：https://select2.github.io/options.html

3、Select2源碼：https://github.com/select2/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  rel="external nofollow" rel="stylesheet"/>
<link  rel="external nofollow" rel="stylesheet"/>
<link rel="stylesheet"  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  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", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   theme: "classic"
  });
  //------------------------------------------------------
  $("#test_2").select2({
   language: "zh-CN", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   placeholder: "請選擇",
   minimumInputLength: 10 //最小需要輸入多少個字符才進(jìn)行查詢
  });
  //-------------------------------------------------------
  $("#test_3").select2({
   language: "zh-CN", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   placeholder: "請選擇",
   tags: true,
   maximumSelectionLength: 2 //設(shè)置最多可以選擇多少項(xiàng)
  });
  //----------------------------------------------------
  $("#test_4").select2({
   language: "zh-CN", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   placeholder: "請選擇",
   allowClear: true,
   tags: true,
   maximumSelectionLength: 2, //設(shè)置最多可以選擇多少項(xiàng)
   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", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   placeholder: "請選擇",
    tags: true,
   maximumSelectionLength: 3, //設(shè)置最多可以選擇多少項(xiàng)
   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", //設(shè)置 提示語言
   width: "100%", //設(shè)置下拉框的寬度
   placeholder: "請選擇",
   tags: true,
   maximumSelectionLength: 3, //設(shè)置最多可以選擇多少項(xiàng)
   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", //設(shè)置 提示語言
   maximumSelectionLength: 3, //設(shè)置最多可以選擇多少項(xiàng)
   placeholder: "請選擇",
   tags: false, //設(shè)置必須存在的選項(xiàng) 才能選中
   templateResult: function (repo) { //搜索到結(jié)果返回后執(zhí)行，可以控制下拉選項(xiàng)的樣式
    console.log("====================templateResult開始==================");
    console.log(repo);
    console.log("====================templateResult結(jié)束==================");
    if (repo.loading) return repo.text;
    var markup = "<div class=''>" + repo.text + "</div>";
    return markup;
   },
   templateSelection: function (repo) { //選中某一個選項(xiàng)是執(zhí)行
    console.log("------------------templateSelection開始-------------------------------------");
    console.log( repo);
    console.log("------------------templateSelection結(jié)束-------------------------------------");
    return repo.full_name || repo.text;
   }
  });
  $("#btn").click(function() {
   alert($("#test_4").select2("val"));
  });
  //$("#test_5").prop("disabled", true); //設(shè)置是否可用
 });
 </script>
<article >
 默認(rèn)
 <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、可搜索選項(xiàng)  

<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、可搜索選項(xiàng)（有搜索關(guān)鍵字控制）

<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、圖文選項(xiàng)

<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、默認(rèn)選中某個選項(xiàng)

<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、某些選項(xiàng)不能選中

<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、搜索動態(tài)加載下拉選項(xiàng)功能（即在用戶輸入搜索內(nèi)容時動態(tài)去后臺取數(shù)據(jù)）

<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>()
  { 
   "北京市", 
   "天津市",
   "重慶市",
   "上海市",
   "廣州市", 
   "長沙", 
   "哈爾濱", 
   "長春",
   "杭州市", 
   "南京市",
   "福建市",
   "河北省", 
   "山西省", 
   "遼寧省", 
   "吉林省", 
   "黑龍江省",
   "江蘇省",
   "浙江省", 
   "安徽省", 
   "福建省", 
   "江西省", 
   "山東省", 
   "河南省",
   "湖北省", 
   "湖南省",
   "廣東省", 
   "海南省", 
   "四川省",
   "貴州省", 
   "云南省", 
   "陜西省", 
   "甘肅省",
   "青海省",
   "臺灣省",
   "內(nèi)蒙古自治區(qū)", 
   "廣西壯族自治區(qū)", 
   "西藏自治區(qū)", 
   "寧夏回族自治區(qū)",
   "新疆維吾爾自治區(qū)", 
   "香港特別行政區(qū)", 
   "澳門特別行政區(qū)" 
  };
  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使用小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • JS實(shí)現(xiàn)自動固定頂部的懸浮菜單欄效果

    JS實(shí)現(xiàn)自動固定頂部的懸浮菜單欄效果

    這篇文章主要介紹了JS實(shí)現(xiàn)自動固定頂部的懸浮菜單欄效果,涉及JavaScript針對window.onscroll事件的響應(yīng)及頁面樣式動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • JavaScript操作XML實(shí)例代碼（獲取新聞標(biāo)題并分頁，并分頁）

    JavaScript操作XML實(shí)例代碼（獲取新聞標(biāo)題并分頁，并分頁）

    XML 代碼部分 這是一個新聞的XML 文件，如果 NBody部分包含 XML 和Html 不可識別部分， 就 包含在DATA 表示附中。
    2010-05-05
  • 網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件

    網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件

    原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果
    2010-03-03
  • 微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄

    微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 利用js將ajax獲取到的后臺數(shù)據(jù)動態(tài)加載至網(wǎng)頁中的方法

    利用js將ajax獲取到的后臺數(shù)據(jù)動態(tài)加載至網(wǎng)頁中的方法

    今天小編就為大家分享一篇利用js將ajax獲取到的后臺數(shù)據(jù)動態(tài)加載至網(wǎng)頁中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • uniapp在開發(fā)app時上傳文件時的問題記錄

    uniapp在開發(fā)app時上傳文件時的問題記錄

    在開發(fā)uniapp應(yīng)用時,可能會遇到文件上傳功能在iOS和部分Android手機(jī)上不兼容的問題,經(jīng)過對比分析,發(fā)現(xiàn)問題可能出在文件的路徑上,通過使用uni.saveFile方法保存文件后,再上傳可以解決問題,這篇文章詳細(xì)介紹了解決方案,并引導(dǎo)讀者參考更多相關(guān)內(nèi)容
    2024-09-09
  • Bootstrap每天必學(xué)之按鈕（Button）插件

    Bootstrap每天必學(xué)之按鈕（Button）插件

    Bootstrap每天必學(xué)之按鈕（Button）插件,通過按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組，感興趣的小伙伴們可以參考一下
    2016-04-04
  • js 獲取掃碼槍輸入數(shù)據(jù)的方法

    js 獲取掃碼槍輸入數(shù)據(jù)的方法

    這篇文章主要介紹了js 獲取掃碼槍輸入數(shù)據(jù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • 只有 20 行的 JavaScript 模板引擎實(shí)例詳解

    只有 20 行的 JavaScript 模板引擎實(shí)例詳解

    這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實(shí)例形式分析了JavaScript 模板引擎實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2020-05-05
  • 5個最佳的Javascript日期處理類庫分享

    5個最佳的Javascript日期處理類庫分享

    在大家日常網(wǎng)站開發(fā)和web應(yīng)用開發(fā)中，我們往往需要有效的調(diào)用Javascript處理日期和時間格式相關(guān)的函數(shù)，在Javascript中已經(jīng)包含了部分最基本的內(nèi)建處理方法
    2012-04-04

最新評論