這篇文章將為大家詳細(xì)講解有關(guān)BootStrap與Select2怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的平和網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
這個(gè)select2組件的功能確實(shí)很強(qiáng)大，可以將圖片放入到select里面隨著文字一起顯示。
組件的下載地址以及API說明地址：
1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/
2、Select2參數(shù)文檔說明：https://select2.github.io/options.html
3、Select2源碼：https://github.com/select2/select2
效果圖：
HTML代碼：
重慶分公司
重慶分公司
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@*
*@
$(document).ready(function () {
$("#test").select2();
//--------------------------------------
$("#test_1").select2({
language: "zh-CN", //設(shè)置 提示語言
width: "100%", //設(shè)置下拉框的寬度
theme: "classic"
});
//------------------------------------------------------
$("#test_2").select2({
language: "zh-CN", //設(shè)置 提示語言
width: "100%", //設(shè)置下拉框的寬度
placeholder: "請選擇",
minimumInputLength: 10 //最小需要輸入多少個(gè)字符才進(jìn)行查詢
});
//-------------------------------------------------------
$("#test_3").select2({
language: "zh-CN", //設(shè)置 提示語言
width: "100%", //設(shè)置下拉框的寬度
placeholder: "請選擇",
tags: true,
maximumSelectionLength: 2 //設(shè)置最多可以選擇多少項(xiàng)
});
//----------------------------------------------------
$("#test_4").select2({
language: "zh-CN", //設(shè)置 提示語言
width: "100%", //設(shè)置下拉框的寬度
placeholder: "請選擇",
allowClear: true,
tags: true,
maximumSelectionLength: 2, //設(shè)置最多可以選擇多少項(xiàng)
templateResult: function (state) {
if (!state.id) {
return state.text;
}
console.log(state.element.getAttribute("imgPath"));
var $state = $('" + repo.text + " 1、可搜索選項(xiàng)
