Home > Web Front-end > JS Tutorial > An explanation of the multiselect drop-down list function in bootstrap

An explanation of the multiselect drop-down list function in bootstrap

PHPz
Release: 2018-10-16 15:56:02
Original
3923 people have browsed it

This article mainly introduces the bootstrap multiselect drop-down list function in detail, which has certain reference value. Interested friends can refer to it

[Related video recommendations: Bootstrap tutorial

bootstrap-multiselect adds more functions and better visual effects based on the original drop-down list!

1. Source code address

https://github.com/davidstutz/bootstrap-multiselect

2. Effect display


3. Code example

Introduced js And 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>
Copy after login

implementation code

3.1, multi-select site

<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>
Copy after login
$(function () { 
      $(&#39;#sel_search_orderstatus&#39;).multiselect({ 
        includeSelectAllOption: true}); 
      });
Copy after login

3.2, prohibition and default selection

<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>
Copy after login
$(function () { 
      $(&#39;#sel_search_orderstatus2&#39;).multiselect(); 
      });
Copy after login

3.3, Grouping

<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>
Copy after login
$(function () { 
       $(&#39;#sel_search_orderstatus3&#39;).multiselect( 
        ); 
      });
Copy after login

3.4, Single option

<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>
Copy after login
$(&#39;#example-single&#39;).multiselect();
Copy after login

3.5, Search

<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>
Copy after login
$(function () { 
       $(&#39;#example-getting-started&#39;).multiselect({ 
          includeSelectAllOption: true, 
          enableFiltering: true 
        }); 
 });
Copy after login

There is no scroll bar by default, please add it in bootstrap-multiselect.css.

The specific attribute demo and source code explain it very clearly, so I won’t list it here.

The above is the detailed content of An explanation of the multiselect drop-down list function in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template