首先需要的js及css,可以直接在layui官网上下载:https://www.layui.com/

相关引用:

<script src="~/layui-v2.4.5/layui/layui.js"></script>
<script src="~/layui-v2.4.5/layui/layui.all.js"></script>
<link href="~/layui-v2.4.5/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui-v2.4.5/layui/lay/modules/layer.js"></script>

增加如下测试html代码:

<div class="layui-form">
        <div class="layui-fluid">
            <div class="layui-form layui-col-md12">
                <div class="layui-form-item">
                    <div class="layui-col-md4">
                        <label class="layui-form-label">城市<span style="color:red">●</span></label>
                        <div class="layui-input-block">
                            <select name="select_base_cityname" id="select_base_cityname" lay-filter="select_base_cityname" xm-select="select_base_cityname" xm-select-type="1">
                                <option value=""></option>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">天津</option>
                                <option value="4">重庆</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-row ">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <button type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="btn_submit" id="btn_submit"><i class="layui-icon">&#xe681</i>获取</button>

</div>
                </div>
            </div>
        </div>
    </div>

配置select多选相关:

<link href="~/layui-v2.4.5/layui/formSelects-v4.css" rel="stylesheet" />
<script src="~/layui-v2.4.5/layui/formSelects-v4.js"></script>
<script type="text/javascript">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    //加载模块
    layui.use(['jquery', 'formSelects'], function () {
        var formSelects = layui.formSelects;

});
</script>

到这一步,已经能显示多选效果了,如图:

接下来就直接获取选择的值就行了:

<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery', 'table', 'laydate', 'element', 'upload', 'flow'], function () {
        var $$ = layui.jquery;
        var form = layui.form,
            layer = parent.layer == undefined ? layui.layer : parent.layer,
            //layer = layui.layer,
            table = layui.table,
            laydate = layui.laydate,
            element = layui.element,
            upload = layui.upload,
            flow = layui.flow;
        form.render();

form.on('submit(btn_submit)', function (obj) {
            layer.confirm('确认录入无误吗?', {
                btn: ['确认', '再看看']
            }, function () {  
                var getName = JSON.stringify(layui.formSelects.value('select_base_cityname', 'name'));//取值name数组
                layer.msg("你选择的值为:" + getName, { offset: '150px', icon: 1, time: 5000 }, function () {                  
                });
            });
        });

});

</script>

更详细的文档,可以参考:https://hnzzmsf.github.io/example/example_v4.html#select_value

总结:layui还是相对不错的前端框架,在一些项目中,都会看到它的身影。

转载于:https://www.cnblogs.com/fengyulv/p/10313169.html

用layui实现下拉框select多选,取值相关推荐

  1. 获取下拉框select上次选择的值

    获取下拉框select上次选择的值 如图所示,如果我们需要获取select的当前选中项,直接用on-change事件直接返回就行,但有些情况下,我们需要获取上一次选中的值来做一些判断: <Row ...

  2. 关于下拉框select和option默认值选定

    标签里添加selected即表示默认选定值 但如何用程序控制,也就是动态生成默认值呢? 网上找了半天都没有直接适合的,不过受到了启发,如下代码实现: 用户选择月份,验证输入不合法后返回,下拉框里的默认 ...

  3. layui框架----下拉框的二级联动

    一.layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块 ...

  4. html下拉框变长,改变HTML下拉框SELECT选项的多种方法

    原标题:改变HTML下拉框SELECT选项的多种方法 提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态. 复制代码 ...

  5. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. ajax多选下拉,模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)(示例代码)...

    模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...

  7. layui表格下拉框无法显示

    layui表格下拉框无法显示 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 4日 $(function () { layui.use(['layer', 'table'], ...

  8. ng-alain 下拉框select设置多选mode: ‘multiple‘时的问题

    ng-alain 下拉框select设置多选mode: 'multiple'时的问题 levelRels: {type: 'string',title: '上级外键关系',ui: {widget: ' ...

  9. PHP获取表单值--同时获取下拉框的Value和Text值

    同时获取下拉框的Value和Text值的解决办法: 添加一个<p>标签,用户选中一项后就将该项的Text赋值给他 然后接受页面获取该P变迁即可获取到相应的Text值 表单填写页面: [ht ...

最新文章

  1. 湖南工大计算机专业咋样,西北工业大学还是湖南大学计算机
  2. 静态代码分析——字符串
  3. echart php mysql简书_echarts-自定义构建
  4. 用户操作-用户添加操作代码实现
  5. guice 实例_使用Google Guice消除实例之间的歧义
  6. mongodb一致性协议_mongo的怎么保持事物的一致性-问答-阿里云开发者社区-阿里云...
  7. iPhone将NSString转换编码集为gb2312或者gbk的方法
  8. python executemany执行延迟_运维架构师-Python 自动化运维开发-031
  9. unet图像分割_UNet++解读 + 它是如何对UNet改进 + 作者的研究态度和方式
  10. Linux非阻塞启动node,Node-单线程、事件驱动、非阻塞I/O
  11. 谨慎设计方法签名(40)
  12. ESP8266 多通道
  13. Android-7.0-Nuplayer-启动流程
  14. ajax传参无法传中文,IE浏览器 ajax传参数值为中文时出现乱码的解决方案
  15. java小球下落_java基础-小球下落问题
  16. 二分+秦九韶算法 求凸点
  17. Android Binder总结(转自Cloud Chou's Tech Blog)
  18. Python开发——16.HTML
  19. 利用计算机审计新闻,计算机审计显身手 审计员钻出账本堆被审单位麻烦减少...
  20. Vue 脚手架搭建目录及文件详解

热门文章

  1. 调取方法_最新微信调取转账证据新方法公布
  2. 基于matlab单目视觉焊缝跟踪系统,基于激光线结构光3D视觉的机器人轨迹跟踪方法与应用...
  3. 询问区间内最大值-最小值
  4. 一台服务器装两个sql server_超详细的centos7部署zabbix监控服务器教程分享
  5. Restore IP Address-深度优先遍历DFS
  6. Educational Codeforces Round 52: D. Three Pieces(记忆化搜索)
  7. 有向图生成树个数(bzoj 4894: 天赋)
  8. bzoj 4293: [PA2015]Siano(线段树)
  9. bzoj 1026: [SCOI2009]windy数(数位dp)
  10. HDU 4553:约会安排(区间合并)