多选下拉框:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html
1.下载formSelects-v4.1
2.引用
<link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" media="all" />
<link href="../../Scripts/formSelects-v4/formSelects-v4.css" rel="stylesheet" /> //2.1.模块化使用
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全局定义一次, 加载formSelects
layui.config({
base: '../src/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载模块
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects; });
</script> //2.2.非模块化使用
<script src="../../Scripts/layui-v2.3.0/layui.js"></script>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var formSelects = layui.formSelects; </script> 3.html:
<select name="city" xm-select="select1"></select>
4.js:
var formSelects = layui.formSelects; //local模式
formSelects.data('select1', 'local', {
arr: [
{"name": "分组-1", "type": "optgroup"},
{"name": "北京", "value": 1},
{"name": "上海", "value": 2},
{"name": "分组-2", "type": "optgroup"},
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
}); //server模式
formSelects.data('select1', 'server', {
url: 'http://yapi.demo.qunar.com/mock/9813/layui/data'
});
//server返回数据与远程搜索数据结构一致
{
"code":0,
"msg":"success",
"data":[
{"name":"北京","value":1,"selected":"","disabled":""},
{"name":"上海","value":2,"selected":"","disabled":""},
{"name":"广州","value":3,"selected":"selected","disabled":""},
{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
{"name":"天津","value":5,"selected":"","disabled":""}
]
}
//当然你也可以偷懒, 返回如下结构
[
{"name":"北京","value":1,"selected":"","disabled":""},
{"name":"上海","value":2,"selected":"","disabled":""},
{"name":"广州","value":3,"selected":"selected","disabled":""},
{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
{"name":"天津","value":5,"selected":"","disabled":""}
] /**
* 1.获取选中数据
*
* formSelects.value(ID, TYPE);
*
* @param ID xm-select的值
* @param TYPE all | val | valStr | name | nameStr
*/
var formSelects = layui.formSelects;
formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val'); // ["2","4"]
formSelects.value('select1', 'valStr'); // 2,4
formSelects.value('select1', 'name'); // ["上海","深圳"]
formSelects.value('select1', 'nameStr'); // 上海,深圳 /**
* 2.设置select的选中值
*
* formSelects.value(ID, ARR);
*
* @param ID xm-select的值
* @param ARR value数组
*/
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳 /**
* 3.追加或删除select的选中值
*
* formSelects.value(ID, ARR, isAppend);
*
* @param ID xm-select的值
* @param ARR value数组
*/
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中

  

layui多选框的更多相关文章

  1. layui复选框

    效果图 layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了.只可以通过js动态设置 ht ...

  2. layui 复选框checkbox 全选写法

    前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘! HTML: <div i ...

  3. LayUI 多选框动态加载、启用、禁用、赋值、取值等js实现

    例如多选框如下: <div class="layui-form"> <select xm-select="city"> </sel ...

  4. layui 复选框checkbox 实现全选全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)

    近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...

  6. layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  7. 【JSP】layui+jsp,根据后台数据给复选框默认勾选

    1.项目中经常使用复选框,当重复加载,就需要从数据库给复选框一个默认的值了. 2.接下来使用的是JSP中迭代的方法,给复选框绑定值.思路和方法不一定好,仅供参考. <input type=&qu ...

  8. layui 单选框、多选框radio 元素判断是必填项 lay-verify='required'

    简单验证复选框,单选框必填 例子代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  9. Layui 监听 复选框 提交表单

    表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...

随机推荐

  1. javascript设计模式:构造器模式学习一

    javascript 设计模式1.简介javascript是一种弱类型语言,不过类可以通过函数模拟出来最常见的实现方法如下:function Car(model){ this.model = mode ...

  2. [Verilog]随意整数(奇数,偶数)分频器设计, 50%占空比

    module div_clk(clk_in, divisor, clk_out); input clk_in; input divisor; output clk_out; reg clk_out = ...

  3. 查看Linux磁盘空间大小命令

    发表于:2012-09-17 10:25   查看Linux磁盘空间大小 一.df 命令: df 是来自于coreutils 软件包,系统安装时,就自带的:我们通过这个命令可以查看磁盘的使用情况以及文 ...

  4. .Net Excel 导出图表Demo(柱状图,多标签页) .net工具类 分享一个简单的随机分红包的实现方式

    .Net Excel 导出图表Demo(柱状图,多标签页) 1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用 新建一 ...

  5. VMware Workstation unrecoverable error: (vmx)虚拟机挂起后无法启动问题

    为了方便,虚拟机都是采用挂起状态,今天在启动虚拟机的时候出现如下提示错误: VMware Workstation unrecoverable error: (vmx)Exception 0xc0000 ...

  6. JAVA学习第三十二课(经常使用对象API)- 基本数据类型对象包装类

    将基本数据类型(8种:int..)封装成对象的优点就是能够在对象中封装很多其它的功能和方法来操控该数据 常见的操作就是:用于基本数据类型与字符串之间的转换 基本数据类型对象包装类一般用于基本类型和字符 ...

  7. USES_CONVERSION的使用和注意

    USES_CONVERSION是用来转换类型的,比如我们很常见的问题: 在Socket编程时候,我们的IP地址从界面上输进去一般都使用CString类型的,可是在SOCKADDR_IN中的inet_a ...

  8. mfc获取控件在对话框上的位置

    CRect rect; GetDlgItem(控件ID)->GetWindowRect(&rect);//获取控件的屏幕坐标ScreenToClient(&rect);//转换为 ...

  9. VirtualBox虚拟机扩容

    1. 在VBox下增加储存 如图,未扩容前是40G 打开cmd命令行(win+r  输入cmd打开) 将目录切换到virtual的安装目录 cd C:\Program Files\Oracle\Vir ...

  10. [svc]salt-grains

    用途 1,匹配客户端 2,配置文件里使用 3,资产管理 定义grains方法1: 方法2: