bootstrap与Select2使用小结

这个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="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="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="stylesheet"/><link href="http://select2.github.io/font-awesome/css/font-awesome.min.css" rel="stylesheet"/><link rel="stylesheet" href="http://fanyi.youdao.com/web2/styles/all-packed.css?572877" 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="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) { retu 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>');retu $state;},templateSelection: function (state) {if (!state.id) retu state.text; // optgroupvar $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');retu $state;}});//----------------------------------------------------------$("#test_5").select2({language: "zh-CN", //设置 提示语言width: "100%", //设置下拉框的宽度placeholder: "请选择", tags: true,maximumSelectionLength: 3,  //设置最多可以选择多少项templateResult: function (state) {if (!state.id) {retu 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>');retu $state;},templateSelection: function (state) {if (!state.id) retu state.text; // optgroupvar $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');retu $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) {retu 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>');retu $state;},templateSelection: function (state) {if (!state.id) retu state.text; // optgroupvar $state = $('<span><img style="width: 30px;height: 20px;" src="' + state.element.getAttribute("imgPath") + '" class="img-flag" /> ' + state.text + '</span>');retu $state;}});//------------------------------------------------------------------$("#test_7").select2({ajax: {url: "Home/GetArea",dataType: 'json',delay: 250,data: function (params) {retu {q: params.term, // search termpage: params.page};},processResults: function (data, params) {params.page = params.page || 1;retu {results: data.items,pagination: {more: (params.page * 30) < data.total_count}};},cache: true},escapeMarkup: function (markup) { retu markup; }, // let our custom formatter workminimumInputLength: 1, language: "zh-CN", //设置 提示语言maximumSelectionLength: 3,  //设置最多可以选择多少项placeholder: "请选择",tags: false,  //设置必须存在的选项 才能选中templateResult: function (repo) { //搜索到结果返回后执行，可以控制下拉选项的样式console.log("====================templateResult开始==================");console.log(repo);console.log("====================templateResult结束==================");if (repo.loading) retu repo.text;var markup = "<div class=''>" + repo.text + "</div>";retu markup;},templateSelection: function (repo) {  //选中某一个选项是执行console.log("------------------templateSelection开始-------------------------------------");console.log( repo);console.log("------------------templateSelection结束-------------------------------------");retu 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">Califoia</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="Easte 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">Califoia</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="Easte 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">Califoia</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="Easte 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">Califoia</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="Easte 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">Califoia</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="Easte 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">Califoia</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="Easte 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">Califoia</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="Easte 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);retu Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet);}public ActionResult Index(){retu View();}}

 

namespace Select2Demo.Models{public class Area{public int id { get; set; }public string text { get; set; }public string element { get; set; }}}

详细demo下载地址： http://pan.baidu.com/s/1qYvpzo4 密码：yvag