English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 위치
  2. 홈페이지
  3. 경험笔记本
  4. 본문

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="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: "ko",-CN", //푸시 텍스트를 설정합니다
   width: "100%", //설정下拉식 창의 너비
   theme: "classic"
  });
  //------------------------------------------------------
  $("#test_2").select2({
   language: "ko",-CN", //푸시 텍스트를 설정합니다
   width: "100%", //설정下拉식 창의 너비
   placeholder: "선택하세요",
   minimumInputLength: 10 //최소 필요한 입력 문자 수를 입력하여 검색
  });
  //-------------------------------------------------------
  $("#test_3").select2({
   language: "ko",-CN", //푸시 텍스트를 설정합니다
   width: "100%", //설정下拉식 창의 너비
   placeholder: "선택하세요",
   tags: true,
   maximumSelectionLength: 2 //가장 많이 선택할 수 있는 항목 수를 설정합니다
  });
  //----------------------------------------------------
  $("#test_4").select2({
   language: "ko",-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: "ko",-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: "ko",-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, // 검색 단어
      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; }, // our custom formatter가 작동하도록 합니다
   minimumInputLength: 1, 
   language: "ko",-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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
   <option value="LA">路易斯安那</option>
   <option value="MN">明尼苏达</option>
   <option value="MS">密西西比</option>
   <option value="MO">密苏里</option>
   <option value="OK">俄克拉荷马</option>
   <option value="SD">南达科他</option>
   <option value="TX">德克萨斯</option>
   <option value="TN">田纳西</option>
   <option value="WI">위스콘신</option>
  </optgroup>
  <option value="optgroup label="Eastern Time Zone">동부 시간대<
   <option value="CT">컨넥티컷</option>
   <option value="DE">델라웨어</option>
   <option value="FL">플로리다</option>
   <option value="GA">조지아</option>
   <option value="IN">��디애나</option>
   <option value="ME">메인</option>
   <option value="MD">メリーランド</option>
   <option value="MA">매사추세츠</option>
   <option value="MI">미시간</option>
   <option value="NH">뉴햄프셔</option>
   <option value="NJ">뉴저지</option>
   <option value="NY">뉴욕</option>
   <option value="NC">노스캘리포니아</option>
   <option value="OH">오하이오</option>
   <option value="PA">펜실베이니아</option>
   <option value="RI">로드아일랜드</option>
   <option value="SC">서던 캘리포니아</option>
   <option value="VT">버몬트</option>
   <option value="VA">버지니아</option>
   <option value="WV">웨스트버지니아</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">肯塔基</option>
  <option value="LA">路易斯安那</option>
  <option value="MN">明尼苏达</option>
  <option value="MS">密西西比</option>
  <option value="MO">密苏里</option>
  <option value="OK">俄克拉荷马</option>
  <option value="SD">南达科他</option>
  <option value="TX">德克萨斯</option>
  <option value="TN">田纳西</option>
  <option value="WI">위스콘신</option>
 </optgroup>
 <option value="optgroup label="Eastern Time Zone">동부 시간대<
  <option value="CT">컨넥티컷</option>
  <option value="DE">델라웨어</option>
  <option value="FL">플로리다</option>
  <option value="GA">조지아</option>
  <option value="IN">��디애나</option>
  <option value="ME">메인</option>
  <option value="MD">メリーランド</option>
  <option value="MA">매사추세츠</option>
  <option value="MI">미시간</option>
  <option value="NH">뉴햄프셔</option>
  <option value="NJ">뉴저지</option>
  <option value="NY">뉴욕</option>
  <option value="NC">노스캘리포니아</option>
  <option value="OH">오하이오</option>
  <option value="PA">펜실베이니아</option>
  <option value="RI">로드아일랜드</option>
  <option value="SC">서던 캘리포니아</option>
  <option value="VT">버몬트</option>
  <option value="VA">버지니아</option>
  <option value="WV">웨스트버지니아</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));
   }
   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; }
 }
}

위에 설명한 것은 편집자가给大家 소개한 BootStrap와 Select입니다.2요약을 사용하여 많은 도움이 되길 바랍니다. 어떤 질문이나 의문이 있으시면 댓글을 남겨 주시기 바랍니다. 편집자는 즉시 답변을 드리겠습니다. 또한,呐喊 튜토리얼 웹사이트에 대한 지원에 감사드립니다!

고지사항: 본문은 인터넷에서 가져왔으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 법적 책임을 부담하지 않습니다. 저작권 침해 내용이 있음을 발견하시면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보고할 때는 #을 @으로 변경하십시오.）를 통해 신고하시고 관련 증거를 제공하시면, 사이트가 즉시 저작권 침해 내용을 삭제합니다.

기본 튜토리얼
좋아하는 것