boottstrap multiselect 드 롭 다운 목록 기능

boottstrap-multiselect 는 원래 생태 의 드 롭 다운 목록 을 바탕 으로 더 많은 기능 과 더 좋 은 시각 적 효 과 를 추가 합 니 다!
1.소스 주소
https://github.com/davidstutz/bootstrap-multiselect
2.효과 전시

3.코드 예제
도 입 된 js 와 css

<script src="js/jquery-1.11.3.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> 
    <script src="js/bootstrap-multiselect.js"></script> 
    <link href="css/bootstrap-multiselect.css" rel="external nofollow" rel="stylesheet" /> 
    <script src="~/Scripts/Home/Index_davidstutz.js"></script> 

구현 코드
3.1 다 중 선택 사이트

<label class="control-label col-xs-1" for="sel_search_orderstatus">    </label> 
  <div class="col-xs-2" style="margin-top:7px;"> 
    <select id="sel_search_orderstatus" style="width:350px;"  multiple="multiple"> 
      <option value="0">   </option> 
      <option value="5">   </option> 
      <option value="10">   </option> 
      <option value="25">  </option> 
      <option value="20">    </option> 
      <option value="30">    </option> 
      <option value="50">    </option> 
      <option value="50">    </option> 
      <option value="50">    </option> 
      <option value="50">    </option> 
      <option value="50">    </option> 
       
    </select> 
  </div> 

$(function () { 
      $('#sel_search_orderstatus').multiselect({ 
        includeSelectAllOption: true}); 
      }); 

3.2 선택 금지 및 기본 설정

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label> 
  <div class="col-xs-2" style="margin-top:7px;"> 
   <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple"> 
      <option value="0">   </option> 
      <option value="5" selected="selected">   </option> 
      <option value="10" selected="selected">   </option> 
      <option value="25" disabled="disabled">  </option> 
      <option value="20" disabled="disabled">    </option> 
      <option value="30" disabled="disabled" selected="selected">    </option> 
      <option value="50">    </option> 
    </select> 
  </div> 

$(function () { 
      $('#sel_search_orderstatus2').multiselect(); 
      }); 

3.3 조별

<label class="control-label col-xs-1" for="sel_search_orderstatus3">  </label> 
            <div class="col-xs-2" style="margin-top:7px;"> 
              <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple"> 
                <optgroup label="   " > 
                  <option value="0">   </option> 
                </optgroup> 
                <optgroup label="   "> 
                  <option value="5">   </option> 
                  <option value="10" selected="selected">   </option> 
                  <option value="25" disabled="disabled">  </option> 
                  <option value="20">    </option> 
                </optgroup> 
                <optgroup label="  "> 
                  <option value="30">    </option> 
                  <option value="50">    </option> 
                </optgroup> 
              </select> 
            </div> 

$(function () { 
       $('#sel_search_orderstatus3').multiselect( 
        ); 
      }); 

3.4 단일 옵션

<label class="control-label col-xs-1" for="sel_search_orderstatus3">  </label> 
    <select id="example-single"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
      <option value="6">Option 6</option> 
    </select> 

$('#example-single').multiselect(); 

3.5.검색

<label class="control-label col-xs-1" for="sel_search_orderstatus3">  </label> 
    <select id="example-getting-started" multiple="multiple"> 
      <option value="cheese">Cheese</option> 
      <option value="tomatoes">Tomatoes</option> 
      <option value="mozarella">Mozzarella</option> 
      <option value="mushrooms">Mushrooms</option> 
      <option value="pepperoni">Pepperoni</option> 
      <option value="onions">Onions</option> 
    </select> 

$(function () { 
       $('#example-getting-started').multiselect({ 
          includeSelectAllOption: true, 
          enableFiltering: true 
        }); 
 }); 

기본 스크롤 바 가 없습니다.boottstrap-multiselect.css 에 추가 하면 됩 니 다.
구체 적 인 속성 demo,소스 코드 가 매우 명확 하 게 설명 되 어 나 는 열거 하지 않 을 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.