layui多选框

Posted 2020-12-03 liuqiyun

多选下拉框：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, 如果该值没有选中则跳过, 该值被选中则取消选中