JavaScript

超轻量级php框架startmvc

首页 JavaScript BootStrap与Select2使用小结

BootStrap与Select2使用小结

更新时间：2020-04-23 19:35:01 作者：startmvc
这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。组件的

这个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

效果图：

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
文章分类
相关文章

使用Bootstrap做一个朝代历史表

bootstrap+spring boot实现面包屑导航功能(前端代码)

Bootstrap实现模态框效果

bootstrap table实现iview固定列的效果实例代码详解

Bootstrap table 实现树形表格联动选中联动取消功能

IE11下CKEditor在Bootstrap Modal中下拉问题的解决

详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑

浅谈bootstrap layer.open中end的使用方法

关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

bootstrap-table+treegrid实现树形表格

bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?

前端插件之Bootstrap Dual Listbox使用教程

bootstrap table实现横向合并与纵向合并

bootstrap table.js动态填充单元格数据的多种方法

bootstrap table列和表头对不齐的解决方法

bootstrap table插件动态加载表头

深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析

bootstrap Table实现合并相同行

bootstrap datepicker的基本使用教程