Home > Backend Development > C#.Net Tutorial > bootstrap-multiselect multi-select example code

bootstrap-multiselect multi-select example code

零下一度
Release: 2017-06-24 09:52:58
Original
1835 people have browsed it

Usage:

The first step is to reference the style and related JS

<link rel="stylesheet" href="css/bootstrap.min.css?1.1.11" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js?1.1.11"></script>
<script type="text/javascript" src="js/bootstrap.min.js?1.1.11"></script>
 
<!-- Include the plugin&#39;s CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js?1.1.11"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css?1.1.11" type="text/css"/>
Copy after login

The second step is to construct the Selection (note the need Set the multiple attribute, otherwise it will still be in radio selection mode, multiple="multiple" )

<!-- Build your select: -->
<select class="multiselect" 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

The third step is to initialize the plug-in:

<script type="text/javascript">
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect();
  });
</script>
Copy after login

Commonly used Method:

  1. select

    $('#cid').multiselect('select', arr[i]); Set the selected item for the control

  2. Get the value

$('#cid').val();Get all selected values ​​of the control

The above is the detailed content of bootstrap-multiselect multi-select example code. 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