bootstrap-multiselect多选框插件链接：https://github.com/davidstutz/bootstrap-multiselect
html代码：<select id="example-select-onChange" multiple="multiple" style="width: 100%;"></select>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "/API/VshopProcessNew.ashx?action=GetProductInfoList",
dataType: "json",
success: function (data) {
if (data.Success) {
var productInfoList = data.Data.ProductInfoList;
for (var i = 0; i < productInfoList.length; i++) {
document.getElementById("example-select-onChange").options.add(new Option(productInfoList[i].ProductName, productInfoList[i].ProductId));
$('#example-select-onChange').multiselect({
onChange: function (option, checked, select) {
if (checked === true) {
else if (checked === false) {
});
} else {
HiTipsShow(data.Message, "error")
});
});
<%-- 引用下面这些脚本要放最后，不然绑定的数据不出来 --%>
<link href="/Admin/css/bootstrap-example.css" rel="stylesheet" />
<link href="/Admin/css/bootstrap-multiselect.css" rel="stylesheet" />
<link href="/Admin/css/prettify.css" rel="stylesheet" />
<script src="/Admin/js/bootstrap-multiselect.js?v=20200113" type="text/javascript" charset="utf-8"></script>
<script src="/Admin/js/prettify.js"></script>
下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释:
引入的css、js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect
插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件。
<!DOCTYPE html>
<html lang="en">
项目开发中，需要用到多选下拉列表插件，由于项目前端框架采用了bootstrap，因此自然选择了bootstrap的组件。经了解其有两组插件：
1、第一个组件是写bootstrap table的主人公
wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。
Multiple-Select源码主页： https://github.
console.log("rs", rs);
var arr = rs.split(",");
var sel = document.getElementById("reason");
var len = sel.options.length;
bootstrap-multiselect插件功能很强大，能做出比较美观的下拉单选、多选、多选分组等效果，使用它的nonSelectedText属性给下拉按钮添加默认文字不起作用，需要在select标签中添加size属性，值需要大于1：
Three
$(function(){
$('.items').multiselect({
先给SELECT标签填入OPTION，同时在 需要勾选的OPTION 中添加属性 selected="selected" ;
接着启用插件：$('#select的ID').multise...
url: "helper/ajax_search.php",
data: {models: decodeURIComponent(brands)},
dataType: 'json',
success: function(data) {
点击button会发现没有任何反应，js没有生效，这是由于上述写法不支持给动态元素或样式绑定事件，支持动态绑定事件的是.live()和.on()
element.on('click','#add-btn',fu...
上一次分享了bootstrap-multiselect插件的一些基本用法，今天想来记下使用该插件的一个实际用途，在公司的项目中，我使用了该插件用于增或者修改某一个对象所关联的属性，由于公司使用的前多选下拉框的中的子项便是我想要关联的子项，那么今天就简单的来分享一下我的思路
首先是对下拉框的一个初始化：
$(document).ready(function () {
initSelectBox()...
我们用bootstrap-multiselect去渲染select选项后，必须要手动改变选项才会触发 onChange 的回调函数，但是有时候我们需要在代码中进行触发onChange的回调函数。
开始想的很简单，不就是改变select选项的值，然后 trigger("change") 吗 ，然而并没有有效果。
然后网上各种找，还是没找到。行！没找到就看源码，我想插件肯定有考虑的这个问题。后面果
JQuery Bootstrap Multiselect插件-设置在multiselect下拉列表中选择的值我正在使用Boostrap Multiselect插件([http://davidstutz.de/bootstrap-multiselect/)]进行多选下拉列表，如下所示foobarbatbaz在页面加载时，我将得到一个值数组，如[101,102]。我应该遍历数组并选择值(应选中与ID对...
对比了不少的多选插件，因为项目基于Boostrap开发，最终选择：Bootstrap Multiselect
源码地址：
https://github.com/davidstutz/bootstrap-multiselect
示例网址：http://davidstutz.github.io/bootstrap-multiselect
使用指南
因为该插件基于jQu
Multiselect是基于jQuery插件的，它可以以下拉列表的形式为用户提供选择内容，能进行单选或者多选。它应用的主要步骤如下：
一，引入需要的相关js和css文件
既然是Bootstrap插件，又是基于jQuery的，很明显主要就导入这两个类型的文件
<link rel="stylesheet" href="css/bootstrap.min...
