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