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”]

select实现多选相关推荐

Html前端基础（select下拉选标签、table表格标签）
文章目录一.select 下拉选标签二.table表格标签三.练习代码继续前两篇的Html前端基础的内容,本文主要关于 <select>下拉选标签和 <table>表格 ...
ng-alain 下拉框select设置多选mode: ‘multiple‘时的问题
ng-alain 下拉框select设置多选mode: 'multiple'时的问题 levelRels: {type: 'string',title: '上级外键关系',ui: {widget: ' ...
Helium自动化框架 Select下拉选
Helium自动化框架 Select下拉选 Helium自动化框架 Select下拉选代码如下: # -*- coding: UTF-8 -*- from helium import * # 导入op ...
记录：ajax获取数据动态生成select下拉选js部份
js代码 $(document).ready(function() {$("#role").setRoleList();//调用下面js中的方法 }); jQuery.fn.ext ...
select实现---多选下拉框
select列表多选下拉框注意:formSelects v4的一些操作: https://blog.csdn.net/zyc050707/article/details/109809503 1.引入 ...
给element的select添加复选框
需求:要求给select多选的时候,给下拉框前加上复选框样式 element select原样式需要更改后的样式 html <el-selectv-model="searchObj. ...
JS中操作＜select＞标签选的值
JS中操作<select>标签选的值 <select>标签是一种表单控件,用来创建下拉列表.在<select> 标签内可用 <option> 标签定义下 ...
select实现多选、全选、全不选
今天使用select下拉框实现了全选,全不选和多选的功能,效果如图: 1.html代码: 为select标签设置multiple属性为true <select id="myselect ...
Vue elementui select选择器全选功能带搜索（左匹配）
效果图: <el-selectv-model="valuesList"multiplecollapse-tagsfilterable:filter-method=" ...

select实现多选

select实现多选相关推荐

最新文章

热门文章