English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This select2The function of the component is indeed very powerful, it can put the picture into the select and display it with the text.
Download address of the component and API description address:
1、Select2Use example address:https://select2.github.io/examples.html 、http://select2.github.io/select2/
2、Select2Parameter document description:https://select2.github.io/options.html
3、Select2Source code:https://github.com/select2/select2
Illustration:
HTML code:
@{
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"/css"/>
<script src="/Content/Select2_4.0.3/dist/js/select2.full.min.js" type="text/javascript"/javascript"></script>
<link href="/Content/Select2_4.0.3/dist/css/select2.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/css" />
<script src="/Content/Select2_4.0.3/dist/js/i18n/zh-CN.js" type="text/javascript"/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;
//--------------------------------------
").val("val");1alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
theme: "classic"
});
//------------------------------------------------------
").val("val");2alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
placeholder: "Please select",
minimumInputLength: 10 //Minimum number of characters to input before searching
});
//-------------------------------------------------------
").val("val");3alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
placeholder: "Please select",
tags: true,
maximumSelectionLength: 2 //Set the maximum number of items that can be selected
});
//----------------------------------------------------
").val("val");4alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
placeholder: "Please select",
allowClear: true,
tags: true,
maximumSelectionLength: 2, //Set the maximum number of items that can be selected
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;
{}
});
//----------------------------------------------------------
").val("val");5alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
placeholder: "Please select",
tags: true,
maximumSelectionLength: 3, //Set the maximum number of items that can be selected
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']);
//-------------------------------------------------------------------
").val("val");6alert($("#test_");2({
language: "zh"-CN", //Set the prompt language
width: "100%", //Set the dropdown width
placeholder: "Please select",
tags: true,
maximumSelectionLength: 3, //Set the maximum number of items that can be selected
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;
{}
});
//------------------------------------------------------------------
").val("val");7alert($("#test_");2({
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", //Set the prompt language
maximumSelectionLength: 3, //Set the maximum number of items that can be selected
placeholder: "Please select",
tags: false, //Set the required options that must exist to be selected
templateResult: function (repo) { //Executed after the search results are returned, can control the style of the dropdown options
console.log("====================templateResult start==================");
console.log(repo);
console.log("====================templateResult end==================");
if (repo.loading) return repo.text;
var markup = "<div class=''>" + repo.text + "</div>";
return markup;
},
templateSelection: function (repo) { //Executing when a certain option is selected
console.log("------------------templateSelection started-------------------------------------");
console.log(repo);
console.log("------------------templateSelection ended-------------------------------------");
return repo.full_name || repo.text;
{}
});
$("#btn").click(function() {
");4alert($("#test_");2").select
});
//").val("val");5").prop("disabled", true); //Set whether it is available
});
</script>
<article >
Default
<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/California</option>
<option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option>
<option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option>
<option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option>
<option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option>
<option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option>
<option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option>
<option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option>
<option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option>
<option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option>
<option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option>
<option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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>
<option value="LA">Louisiana</option>/option>
<option value="MN">Minnesota</option>/option>
<option value="MS">Mississippi</option>/option>
<option value="MO">Missouri</option>/option>
<option value="OK">Oklahoma</option>/option>
<option value="SD">South Dakota</option>/option>
<option value="TX">Texas</option>/option>
<option value="TN">Tennessee</option>/option>
<option value="WI">Wisconsin</option>/option>
</optgroup>
<optgroup label="Eastern Time Zone"></optgroup>
<option value="CT">Connecticut</option>/option>
<option value="DE">Delaware</option>/option>
<option value="FL">Florida</option>/option>
<option value="GA">Georgia</option>/option>
<option value="IN">Indiana</option>/option>
<option value="ME">Maine</option>/option>
<option value="MD">Maryland</option>/option>
<option value="MA">Massachusetts</option>/option>
<option value="MI">Michigan</option>/option>
<option value="NH">New Hampshire</option>/option>
<option value="NJ">New Jersey</option>/option>
<option value="NY">New York</option>/option>
<option value="NC">North Carolina</option>/option>
<option value="OH">Ohio</option>/option>
<option value="PA">Pennsylvania</option>/option>
<option value="RI">Rhode Island</option>/option>
<option value="SC">South Carolina</option>/option>
<option value="VT">Vermont</option>/option>
<option value="VA">Virginia</option>/option>
<option value="WV">West Virginia</option>/option>
</optgroup>
</select>
<br/>
----------------------------------------------------
<br/>
1Searchable options
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> </article> ================================ <br/>
2Searchable options (controlled by search keywords)
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> </article> =============================== <br/>
3Multiple selection
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> </article> =============================== <br/>
4Graphical options
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> </article> <br/> ====================================== <br/>
5Default selection of an option
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> </article> <br/> ========================================= <br/>
6Some options cannot be selected
<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/California</option> <option value="NV" imgPath="https://select2.github.io/vendor/images/flags/Nevada</option> <option value="OR" imgPath="https://select2.github.io/vendor/images/flags/Oregon</option> <option value="WA" disabled="disabled" imgPath="https://select2.github.io/vendor/images/flags/Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ" imgPath="https://select2.github.io/vendor/images/flags/Arizona</option> <option value="CO" imgPath="https://select2.github.io/vendor/images/flags/Colorado</option> <option value="ID" imgPath="https://select2.github.io/vendor/images/flags/Idaho</option> <option value="MT" imgPath="https://select2.github.io/vendor/images/flags/Montana</option> <option value="NE" imgPath="https://select2.github.io/vendor/images/flags/Nebraska</option> <option value="NM" imgPath="https://select2.github.io/vendor/images/flags/New Mexico</option> <option value="ND" imgPath="https://select2.github.io/vendor/images/flags/North Dakota</option> <option value="UT" imgPath="https://select2.github.io/vendor/images/flags/Utah</option> <option value="WY" imgPath="https://select2.github.io/vendor/images/flags/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> <option value="LA">Louisiana</option>/option> <option value="MN">Minnesota</option>/option> <option value="MS">Mississippi</option>/option> <option value="MO">Missouri</option>/option> <option value="OK">Oklahoma</option>/option> <option value="SD">South Dakota</option>/option> <option value="TX">Texas</option>/option> <option value="TN">Tennessee</option>/option> <option value="WI">Wisconsin</option>/option> </optgroup> <optgroup label="Eastern Time Zone"></optgroup> <option value="CT">Connecticut</option>/option> <option value="DE">Delaware</option>/option> <option value="FL">Florida</option>/option> <option value="GA">Georgia</option>/option> <option value="IN">Indiana</option>/option> <option value="ME">Maine</option>/option> <option value="MD">Maryland</option>/option> <option value="MA">Massachusetts</option>/option> <option value="MI">Michigan</option>/option> <option value="NH">New Hampshire</option>/option> <option value="NJ">New Jersey</option>/option> <option value="NY">New York</option>/option> <option value="NC">North Carolina</option>/option> <option value="OH">Ohio</option>/option> <option value="PA">Pennsylvania</option>/option> <option value="RI">Rhode Island</option>/option> <option value="SC">South Carolina</option>/option> <option value="VT">Vermont</option>/option> <option value="VA">Virginia</option>/option> <option value="WV">West Virginia</option>/option> </optgroup> </select> <br/> ====================================== <br/>
7Search dynamic dropdown option function (i.e., dynamically fetching data from the backend when the user enters search content)
<article> <select id="test_7" class=" form-control " multiple="multiple"> </select> </article> <br/> ========================================= <button id="btn">Get selected value</button>
Controller action code:
public class HomeController : Controller
{
public IEnumerable<string> areaList = new List<string>()
{
"Beijing City",
"Tianjin City",
"Chongqing City",
"Shanghai City",
"Guangzhou City",
"Changsha",
"Harbin",
"Changchun",
"Hangzhou City",
"Nanjing City",
"Fujian City",
"Hebei Province",
"Shanxi Province",
"Liaoning Province",
"Jilin Province",
"Heilongjiang Province",
"Jiangsu Province",
"Zhejiang Province",
"Anhui Province",
"Fujian Province",
"Jiangxi Province",
"Shandong Province",
"Henan Province",
"Hubei Province",
"Hunan Province",
"Guangdong Province",
"Hainan Province",
"Sichuan Province",
"Guizhou Province",
"Yunnan Province",
"Shaanxi Province",
"Gansu Province",
"Qinghai Province",
"Taiwan Province",
"Inner Mongolia Autonomous Region",
"Guangxi Zhuang Autonomous Region",
"Tibet Autonomous Region",
"Ningxia Hui Autonomous Region",
"Xinjiang Uyghur Autonomous Region",
"Hong Kong Special Administrative Region",
"Macao Special Administrative Region"
};
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));
{}
63; lstRes.Take(10) : lstRes.Skip(Convert.ToInt32 * 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; }
{}
{}
The above is what the editor introduces to everyone about BootStrap and Select2Use the summary, hoping it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time. I am also very grateful for the support of everyone for the Yelling Tutorial website!
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)