formselects是由haier谢周峰大神开发的一款基于jQuery框架的下拉框插件。其优势在于支持optgroup分组，可以实现数据动态加载、远程请求等功能，适用于大部分下拉选项的展示场景。

一、formselects远程

formselects远程通过设置对应的url，实现异步数据请求。使用方法如下：

formSelects.data('selectId', 'remoteUrl', {
    keyName: 'keyValue',
    keyValue: 'keyValue'
});

'selectId' 是下拉框的id属性，要与html模板中一致。
'remoteUrl' 是数据请求的url，可以是本地路径或远程路径。
'keyName' 是请求参数的键名。
'keyValue' 是请求参数的键值。

二、formselects动态加载数据

formselects动态加载数据可以通过在html模板中设置option标签或通过js代码设置option对象。使用方法如下：

formSelects.render({
    name: 'selectName',
    data: [{
        name: 'option1',
        value: 1
    }, {
        name: 'option2',
        value: 2
    }]
}, false);

'selectName' 是下拉框的name属性，用于提交表单时获取选中值。
'data' 是要加载的数据，可以是一组对象，也可以是一个对象数组。
false 表示数据不需要分组，true 表示数据需要分组，使用optgroup标签分组。

三、formselects v4 赋值

formselects v4 赋值需要在html模板中设置selected标签，或者通过js动态编写。

<select name="selectId" lay-verify="required" lay-search="" multiple xm-select="selectId" xm-select-direction="auto">
    <option value="option1" selected>option1</option>
    <option value="option2" selected>option2</option>
</select>

'selected' 标记需要选中的选项，与原有option标签配合使用。

四、formselects无法回显

formselects无法回显有以下几种原因：

html模板中可能没有设置selected标签，使用时需要判断是否设置。
使用ajax调用数据，需要在ajax成功回调中设置selected属性标记选中值。
在后台传递到html模板中的值格式，不一定是需要的options格式，需要调整一下格式。

五、formselects无法赋值

formselects无法赋值也有一些原因：

在html模板中选择器id或name属性设置错误或发生变化。
formSelects使用了2个异步请求的插件，需要注意2个插件必须引入。

六、formselects默认选中

formselects默认选中有以下2个方法：

在html模板中设置selected属性。
在js代码中设置selected属性。

七、formselects数据回显

formselects数据回显需要获取选中的值，并将值回填到表单中。使用方法如下：

// 获取选中的值
var selectValues = formSelects.value('selectId', 'val');
// 回填到表单
$('form').find('input[name="selectName"]').val(selectValues.join(','));

八、formselects v4

formselects v4 版本在v3版本基础上增加了白名单功能，可以过滤掉一些敏感字符，避免被XSS攻击。同时新增了部分API，如：formSelects.value、formSelects.data等。使用方法如下：

// 初始化formselects
layui.formSelects && layui.formSelects.render('selectId');
// 获取选中的值
formSelects.value('selectId', 'val');

九、formselects.value、formselects.data

formselects.value、formselects.data用于获取选中的值与查询回来的值。使用方法如下：

// 获取选中的值
formSelects.value('selectId', 'val');
// 获取所有的数据
formSelects.data('selectId');

结语

本文对formselects进行了详细的阐述，从formselects远程、formselects动态加载数据、formselects v4 赋值、formselects无法回显、formselects无法赋值、formselects默认选中、formselects 数据回显、formselects v4、formselects.value、formselects.data等多个方面进行了阐述。希望对读者有所帮助，同时建议开发者可以多多使用、实践、调试，熟悉插件的各种功能，提高开发效率。

formselects详解