이 글에서는 주로 부트스트랩 다중 선택 드롭다운 목록 기능을 자세히 소개하며, 관심 있는 친구들은 참고하시기 바랍니다
[관련 영상 추천: 부트스트랩 튜토리얼]
bootstrap-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> <p 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> </p>
$(function () { $('#sel_search_orderstatus').multiselect({ includeSelectAllOption: true}); });3.2, 금지 및 기본 선택
<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label> <p 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> </p>
$(function () { $('#sel_search_orderstatus2').multiselect(); });3.3, 그룹화
<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label> <p 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> </p>
$(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 }); });기본적으로 스크롤 막대가 없습니다. bootstrap-multiselect.css에 추가하세요.
특정 속성 데모와 소스 코드에 매우 명확하게 설명되어 있으므로 여기에 나열하지는 않겠습니다.
위 내용은 부트스트랩의 다중 선택 드롭다운 목록 기능에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!