select实现多选

一. 需求：
实现多选，并且可以显示原值

二.代码实现
选择用select下拉框实现多选。

<select class="required" data-live-search="true" name="areaCode" id="areaCode"  multiple="multiple">
    <option value="1" selected="selected">选项1</option>
    <option value="2" selected="selected">选项2</option>
    <option value="3" selected="selected">选项3</option>
</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”]