BootStrap與Select2使用小結(jié)

2019-11-19 17:32:18

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

這個(gè)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: "請(qǐng)選擇",   minimumInputLength: 10 //最小需要輸入多少個(gè)字符才進(jìn)行查詢  });  //-------------------------------------------------------  $("#test_3").select2({   language: "zh-CN", //設(shè)置 提示語言   width: "100%", //設(shè)置下拉框的寬度   placeholder: "請(qǐng)選擇",   tags: true,   maximumSelectionLength: 2 //設(shè)置最多可以選擇多少項(xiàng)  });  //----------------------------------------------------  $("#test_4").select2({   language: "zh-CN", //設(shè)置 提示語言   width: "100%", //設(shè)置下拉框的寬度   placeholder: "請(qǐng)選擇",   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: "請(qǐng)選擇",    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: "請(qǐng)選擇",   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: "請(qǐng)選擇",   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) { //選中某一個(gè)選項(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)選中某個(gè)選項(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、搜索動(dòng)態(tài)加載下拉選項(xiàng)功能（即在用戶輸入搜索內(nèi)容時(shí)動(dòng)態(tà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>()  {    "北京市",    "天津市",   "重慶市",   "上海市",   "廣州市",    "長(zhǎng)沙",    "哈爾濱",    "長(zhǎng)春",   "杭州市",    "南京市",   "福建市",   "河北省",    "山西省",    "遼寧省",    "吉林省",    "黑龍江省",   "江蘇省",   "浙江省",    "安徽省",    "福建省",    "江西省",    "山東省",    "河南省",   "湖北省",    "湖南省",   "廣東省",    "海南省",    "四川省",   "貴州省",    "云南省",    "陜西省",    "甘肅省",   "青海省",   "臺(tái)灣省",   "內(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é)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！

上一篇：Bootstrap表格使用方法詳解

下一篇：解決給dom元素綁定click等事件無效問題的方法