2021-10-09 formSelects-v4.js的使用

使用方式

• 下载formSelects-v4，并引入
• 使用

测试下拉多选框

• html

@layout("/common/_form.html",{js:["/assets/test/add.js"],css:["/assets/expand/module/formSelects/formSelects-v4.css"]}){
...
    <input  id="ids" name="ids" value="${item.ids}" type="hidden"/>
    <select id="test" name="test" xm-select="test" lay-filter="test" lay-verify="required" required lay-vertype="tips">
        <option value="">请选择</option>
    </select>
...
@}

1.配合使用，必填提示：lay-verify="required" required lay-vertype="tips" 

    （提示样式）其中lay-vertype的参数可修改：tips吸附层，alert对话框，msg默认

2.lay-filter="test" ：启用（/禁用）禁选需要

• js：由于formSelects的请求是异步的，所以要在成功之后设置多选中的选中值

layui.use(['formSelects'], function () {
    var formSelects = layui.formSelects;

    var ids= $("#ids").val();  //得到已选数据字符串 1,2,3

    //处理已选字符串 1,2,3 为数组["1","2","3"]
    var idsArray = new Array();
    idsArray = ids.split(",");

    formSelects.config('test', {
        searchUrl: Feng.ctxPath + "test",    //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
        keyName: 'name',    //自定义返回数据中name的key, 默认 name
        keyVal: 'id',        //自定义返回数据中value的key, 默认 value
        success:function () {
           formSelects.value("test",idsArray);//已选数据的回显
       }
        clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
    });
    

    //启用（/禁用）多选
    formSelects.disabled("test");
    formSelects.undisabled("test");
    ...
});

searchUrl返回的数据为

[
	{
		"id":"1",
		"name":"张三"
	},
    {
		"id":"2",
		"name":"四"
	},
    {
		"id":"3",
		"name":"王五"
	},
    {
		"id":"4",
		"name":"赵六"
	},
    {
		"id":"5",
		"name":"孙七"
	}
]

• xm-select-show-count="2"：最多显示2个, 多余的隐藏

<select id="test" name="test" xm-select-show-count="2">
        <option value="">请选择</option>
    </select>

/**
 * 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('select1', ["2", "4"]);       // 选中value为2和4的option → 上海,深圳

参考链接：

      文档https://hnzzmsf.github.io/example/example_v4.html#methods-config
第三方多选下拉以及数据回显（重要的是回显）https://www.cnblogs.com/jinaokaifa/p/12060774.htmlLayui【2.5.6】 表单验证模块，修改默认提示层（lay-verType）https://blog.csdn.net/qq_34147601/article/details/104430494