bootstrap-multiselect doc: http://davidstutz.github.io/bootstrap-multiselect/
The drop-down multi-select box is used in the project. After searching, I feel that bootstrap-multiselect is good, let me briefly introduce it today:
test page:
<html lang="en">
<head>
<meta charset="utf-8" />
<!--Pay attention to the version of jquery and the order in which css and js are introduced here-->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<!-- <script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script> -->
<!--No selection prompt is Chinese, only part of Chinese-->
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
console.log("start");
$(document).ready(function() {
$('#example-multiple').multiselect();
$('#example-radio').multiselect();
$('#example-multiple-optgroups').multiselect();
$('#example-radio-optgroups').multiselect();
/*
* Grouping is optional, collapsible, not displayed when all selected, the number of all options
*/
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true,
selectAllNumber: false
});
/*
* Grouping is optional, collapsible, all selectable, with drop-down options displayed on the right,
*Trigger selection event, searchable, and display the number of selected options (numberDisplayed)
*/
$('#example-all').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
includeSelectAllOption: true,
buttonWidth: '400px',
dropRight: true,
maxHeight: 200,
onChange: function(option, checked) {
alert($(option).val());
/ * if (condition) {
this.clearSelection();//Clear all selections and display
}*/
},
nonSelectedText: 'Please select',
numberDisplayed: 10,
enableFiltering: true,
allSelectedText:'all',
});
});
</script>
</head>
<body style="margin-left:10;">
1. Multi-select drop-down box:
<select id="example-multiple" 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>
<BR/>
2. Radio drop-down box:
<select id="example-radio">
<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>
<BR/>
From the above two points of view, can you choose multiple, mainly the multiple="multiple" attribute configuration...
3. Multi-select group drop-down box:
<select id="example-multiple-optgroups" multiple="multiple">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<BR/>
4. Radio group drop-down box:
<select id="example-radio-optgroups">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<BR/>
5. Group multi-select drop-down boxes:
<select id="example-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1" disabled="disabled">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
6. Group multi-select, collapsible, all-select drop-down box:
<select id="example-all" multiple="multiple">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</body>
</html>
The effect is as follows:
During use, it is found that it conflicts with the ace.min.css style sheet of <link rel="stylesheet" href="static/css/ace.min.css" />, the multiselect drop-down box checkbox is not displayed,
check the drop-down box What is the difference with the checkbox in the
page, I found that there is an extra <span class="lbl"/> in the checkbox in the page, but there is no checkbox in the multiSelect drop-down box, see if you can, modify JS, bootstrap-multiselect_cn.js; In the createOptionValue method in the script, modify
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>
/**
* Create an option using the given select option.
*
* @param {jQuery} element
*/
createOptionValue: function(element) {
var $ element = $ (element);
if ($element.is(':selected')) {
$element.prop('selected', true);
}
// Support the label attribute on options.
var label = this.options.optionLabel(element);
var classes = this.options.optionClass(element);
var value = $ element.val ();
var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.options.templates.li);
var $label = $('label', $li);
$label.addClass(inputType);
$li.addClass(classes);
if (this.options.enableHTML) {
$label.html(" " + label);
}
else {
$label.text(" " + label);
}
//var $checkbox = $('<input/>').attr('type', inputType);
var $checkbox = $('<input/>').attr('type', inputType);
//The test is modified as follows
//$checkbox.append('<span class="lbl"/>');
//$checkbox.after('<span class="lbl"/>');
//$('<input>').append('<span class="lbl"/>');
//var $checkbox = $('<input/>').attr('type', 'radio'));
//solve the ace-admin-min.css，input type is checkbox css collision
//var $checkbox = $('<input/>').attr('class', "lbl");
//.append('<span class="lbl"> Letter of Credit</span>'
var name = this.options.checkboxName($element);
if (name) {
$checkbox.attr('name', name);
}
$label.prepend($checkbox);
...
}
Test found:
$checkbox.append('<span class="lbl"/>');//This is not what we want
What we want is the effect produced by after,
$checkbox.after('<span class="lbl"/>');//Invalid, jquery, not found,
But through id, calling after can have an effect, but $('<input/>').after and cannot be found through class.
As for what to ask, I couldn't solve it, I know you can leave a message for me, thank you.
Reference:
The use of html, append, appendTo, after, insertAfter, before, insertBefore, empty, remove in JQuery: http://www.cnblogs.com/wx1993/p/4806873.html
Give up modifying Js, modify css, bootstrap- multiselectModification
_
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px
}
for
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px;
margin-left: 20px;
opacity:1;/*checkbox transparency*/
position:relative
}
Add the following styles:
.multiselect.dropdown-toggle.btn.btn-default {
background-color: #dbd8d8 !important;
color: black !important;
border: #c92727 !important;
box-shadow: none !important;
text-shadow: 0 -1px 0 #d8c8c8 !important;
}
.btn.btn-default.multiselect-clear-filter {
background-color: #fff9f9 !important;
border: #c34e4e !important;
}
The main purpose of using !important is to make the priority of the style higher, which can be specified and not covered by ace.min.css: .
Reference: In
-depth understanding of css style loading order and overlay order: http://www.jb51.net/css/124992.html
html, css, js file loading order and execution: http://www.cnblogs.com/Walker -lyl/p/5262075.html
CSS style loading order:
1. There is a <link> tag in the <head> tag that refers to an external CSS file
2. Internal CSS style
3. Tag style style
is the order in which CSS appears in html; But these styles have priority as follows. The
CSS style override order is deeply understood:
1. The more precise the element selector of the style sheet is, the higher the style priority is:
the style specified by the id selector > the style specified by the class selector Style > Style specified by element type selector
2. For styles specified by the same type selector, the later in
the style sheet file, the higher the priority. rather than the order in which the element class appears.
3. If you want to make a style take precedence, you can use !important to specify the
test page:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./bootstrap-multiselect-master/jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
console.log("start");
$(document).ready(function() {
//$('<input/>').append('<span class="lbl"/>');
//var $input = $('<input/>').attr('type', 'checkbox');
// $('<input>') creates an input tag
var $input = $('<input>').attr('type', 'checkbox');
$input.val("c");
$input.addClass("multiselect-ace")
$(".multiselect-ace").after('<span class="lbl"/>');
//$input.append('<span class="lbl"/>');
//$input.after('<span class="lbl"/>');//Invalid, jquery, not found,
$('<span class="lbl"/>').insertAfter($input);
//$('<span class="lbl"/>').appendTo($input);
//$input.appendTo('<span class="lbl"/>');
//var $input = $('<input/>').append('<span class="lbl"/>');
$("#test").append($input);
//$("#test").after('<span class="lbl"/>');
//alert( $('<input/>').val());
});
</script>
</head>
<body>
<select>
<option>test</option>
</select>
<BR/>
<input id="test" type="radio" name="test" value="v"/>
<BR/>
<!-- <input type="checkbox"/> -->
</body>
</html>