このselect2このSelectコンポーネントの機能は非常に強力で、画像をselectに挿入し、テキストとともに表示することができます。
コンポーネントのダウンロードURLおよびAPI説明URL：
1、Select2使用例URL：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"/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();
//--------------------------------------
$("#test_1").select2({
language: "zh"-CN", //アラート言語を設定する
幅: "100%", //設定下拉ボックスの幅
テーマ: "classic"
});
//------------------------------------------------------
$("#test_2").select2({
language: "zh"-CN", //アラート言語を設定する
幅: "100%", //設定下拉ボックスの幅
placeholder: "選択してください",
minimumInputLength: 10 //最小必要な文字数
});
//-------------------------------------------------------
$("#test_3").select2({
language: "zh"-CN", //アラート言語を設定する
幅: "100%", //設定下拉ボックスの幅
placeholder: "選択してください",
tags: true,
maximumSelectionLength: 2 //設定できる最大選択数
});
//----------------------------------------------------
$("#test_4").select2({
language: "zh"-CN", //アラート言語を設定する
幅: "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", //アラート言語を設定する
幅: "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", //アラート言語を設定する
幅: "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, // 検索語
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>