实际的项目网站中或多或少的或用到多选框，我选用的一款是 Bootstrap Multiselect。
如果你英文好一点，里面有详细的介绍，多选框的设置，多选框获取值/文本，选项分组，各种各样丰富的表现方式和获取。
结合实际项目，加深技术理解，同时也方便自己后续项目中的使用。
多选框和单选框相同，实际项目中前端不可能将里面的选项很直白的写在展示层面，或多都是取自数据库中的代码表。
这样耦合低，便于维护；当需要展示的选项发生变化的时候，只需要变更一遍数据库就好，不需要每个页面修改，假如有100个页面放置了单选框或者多选框,画面太惨了。
动态生成 多选框/单选框 方式我接触的写法有两种，具体好坏，效率问题，仁者见仁智者见智。
程序设计方式多种多样，看客老爷肯定知道比我这样写更好的，不多说了，上代码。
1.JavaBean 方式，在JSP 页面，嵌入java 代码实现
a.product 定义的基本的属性和 setter 和 getter 是一个纯粹的 pojo 对象；
b.具体的 product 对象的读取，涉及与数据交互，封装方法的数据结构可以使用很多（包括数组、map、list），我这里使用的是 ArrayList
c.如果想实现的更合理一点，可以定义数据库访问接口，里面定义各种各样对操作 product 的方法（增，删，改，查....）,然后由另外一个类实现这些接口的方法(貌似扯远了，等有时间在说吧)；
2.后台数据库交互，前台 JavaScript 动态添加选项
依赖的具体的 WebMVC 框架为 SpringMvc.
a. 第一种方法去赋值时需要注意的时，多选框要在前面先初始化；
b. 然后在官方文档的帮助下，找到了第二种方法，需要用到一个 Array,还有一个万能的 object,将后台返回回来的数据封装给object,然后将object 放入 Array中，最后赋值给多选框；
c. 后台交互需要一个简单的 sql ，SpringMvc 会将返回回去的 map,转换为 javascript Object 对象， list 转换为 Array 对象；
d.多选框提交到后台值，你可以选择提交选项文本，选项对应的值，提交选项 code 有优势，具体为code 一般为数字或者字母，而文本一般是汉字，会导致post 到后台的内容过大，需要进行转码，code 在代码表中是唯一的，还有安全性较高；
e.后台具体的解析方法如下,我项目中具体是进行查询，所以拼接为一个 sql 子句，解析后当然也可以用来更新数据库；
以上所述是小编给大家介绍的Bootstrap Multiselect 常用组件实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/bootstrap/38004.html