一. 需求: 实现多选,并且可以显示原值
二.代码实现 选择用select下拉框实现多选。
1.multiple="multiple"实现多选效果 2.data-live-search="true" 添加模糊匹配下拉选项,辅助选择功能 3.selected="selected" 设置默认选中项
需要注意的是,在这里这样写的话,虽然实质上选项1/选项2/选项3的值都被选中了,但是这些选项并不会出现在下拉的文本框中,用户点击进入页面的时候,视觉效果上其实是没有选中项的。 因此,需要在初始化时,添加:
$('select[data-live-search="true"]').select2();
语句,对该文本框进行初始化。
此外,如果要动态清空下拉选项的话,语句为:
$("#storeArea").val(""); //清空已经选中的内容
$("#storeArea option").remove(); //清空所有下拉选项
$('select[data-live-search="true"]').select2(); //清空展示选中项的文本框
三.后台传值 select多选传到后台的值是逗号分隔的字符串,以上述下拉选项为例,后台接收到的值为: [“1”,”2”,”3”]