layui多選框

多選下拉框：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, 如果該值沒有選中則跳過, 該值被選中則取消選中