在layui中实现下拉框select多选,取值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
html

form.on('select(multi)', function (data) { // 打开控制台查看效果
    onsole.log(data.elem); //得到select原始DOM对象
    console.log(data.value); //得到被选中的值(数组类型)
    console.log(data.othis); //得到美化后的DOM对象
    console.log(data.current_value); //当前操作的值(选中或取消的值)
})

赋值

// 有两种赋值方式: 1. 直接在option中写selected。 2. 通过 js 赋值。
// 1. 直接在option中写selected
<select name="多选+搜索+大小写不敏感" multiple="" lay-search="">
    <option value="">请选择您的兴趣爱好</option>
    <option>sing1</option>
    <option selected="">sing2</option>
    <option>SING1-大写</option>
    <option>movie1</option>
    <option selected="">movie2</option>
    <option>movie3</option>
    <option>MOVIE4</option>
    <option>swim</option>
    <option>moon</option>
</select>
// 2. 通过 js 赋值。
<select name="简化多选+搜索+大小写敏感" multiple="" lay-search="" lay-case="" lay-omit="">
    <option value="">请选择您的兴趣爱好</option>
    <option>sing1</option>
    <option>sing2</option>
    <option>SING1-大写</option>
    <option>movie1</option>
    <option>movie2</option>
    <option>movie3</option>
    <option>MOVIE4</option>
    <option>swim</option>
    <option>moon</option>
</select>
<script>
    // 手动赋值
    $('select[name="简化多选+搜索+大小写敏感"]').val(['sing1', 'movie2']);
    form.render();
</script>

参考

https://hnzzmsf.github.io/example/example_v4.html

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐