BootStrap与Select2使用小结
发布时间 - 2026-01-10 23:06:41 点击率：次这个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的select2既可以查询又可以输入的实现代码
# BootStrap select2 动态改变值的方法
# JS组件Bootstrap Select2使用方法解析
# 基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
# JS组件Bootstrap Select2使用方法详解
# 请选择
# 最多
# 可以选择
# 下拉框
# 宁夏回族自治区
# 香港特别行政区
# 西藏自治区
# 小编
# 新疆维吾尔自治区
# 台湾省
# 青海省
# 广西壮族自治区
# 贵州省
# 内蒙古自治区
# 海南省
# 甘肃省
# 吉林省
# 云南省
# 山西省
# 陕西省
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Python制作简易注册登录系统
活动邀请函制作网站有哪些,活动邀请函文案？
Laravel怎么为数据库表字段添加索引以优化查询
如何在 Pandas 中基于一列条件计算另一列的分组均值
Python自然语言搜索引擎项目教程_倒排索引查询优化案例
EditPlus 正则表达式 实战(3)
大型企业网站制作流程,做网站需要注册公司吗？
如何做网站制作流程,*游戏网站怎么搭建？
千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】
HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】
如何在IIS服务器上快速部署高效网站？
Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】
Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理
UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】
网页设计与网站制作内容,怎样注册网站？
如何彻底卸载建站之星软件？
简单实现jsp分页
如何在宝塔面板中修改默认建站目录？
如何使用 jQuery 正确渲染 Instagram 风格的标签列表
,网页ppt怎么弄成自己的ppt？
移动端脚本框架Hammer.js
Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】
C++用Dijkstra(迪杰斯特拉)算法求最短路径
高防网站服务器：DDoS防御与BGP线路的AI智能防护方案
如何解决hover在ie6中的兼容性问题
哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？
Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性
浅析上传头像示例及其注意事项
Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制
网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？
阿里云网站搭建费用解析：服务器价格与建站成本优化指南
linux top下的 minerd 木马清除方法
Swift中switch语句区间和元组模式匹配
JavaScript如何实现类型判断_typeof和instanceof有什么区别
千库网官网入口推荐 千库网设计创意平台入口
iOS中将个别页面强制横屏其他页面竖屏
如何打造高效商业网站？建站目的决定转化率
学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？
浅谈redis在项目中的应用
如何实现javascript表单验证_正则表达式有哪些实用技巧
Laravel模型关联查询教程_Laravel Eloquent一对多关联写法
Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧
Laravel如何与Docker（Sail）协同开发？（环境搭建教程）
如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程
如何快速辨别茅台真假？关键步骤解析
如何快速查询网址的建站时间与历史轨迹？
QQ浏览器网页版登录入口 个人中心在线进入
通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】
Laravel如何生成URL和重定向？（路由助手函数）
Android实现代码画虚线边框背景效果
最新文章
Sublime怎么一键压缩JS代码 Su
sublime如何在搜索中使用正则表达式
Sublime如何设置透明窗口效果 Su
mysql如何设计商品表结构_mysql
css属性背景图不显示怎么办_通过检查路
如何使用Golang实现排序_Golan
农历闰月是怎么回事_为合回归年加一月调整
塑造《刺客信条》艾吉奥传奇的编剧离开育碧
1英里等于多少公里 1mile和km的换
css grid布局中行和列是如何定义的
PS批量旋转和翻转图片，快速校正图片方向
C# Swagger UI自定义方法 C
OPPO手机九宫格和全键盘怎么切换_OP
Go语言如何实现用户登录注册_Golan
1节飞行速度多少公里每小时 1节是多少公
纸嫁衣8千子树第五章庙门怎么开启 庙门
Laravel 多行数据编辑表单中实现逐
明日之后如何提升钓鱼等级 明日之后提升钓
支付宝怎样查年度账单_支付宝年度账单查看
C# 多线程UI更新Dispatcher