formselects详解

MHHXS • 2025-04-12 13:00 • 编程

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

一、formselects远程

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

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

1、’selectId’ 是下拉框的id属性，要与html模板中一致。

2、’remoteUrl’ 是数据请求的url，可以是本地路径或远程路径。

3、’keyName’ 是请求参数的键名。

4、’keyValue’ 是请求参数的键值。

二、formselects动态加载数据

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

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

1、’selectName’ 是下拉框的name属性，用于提交表单时获取选中值。

2、’data’ 是要加载的数据，可以是一组对象，也可以是一个对象数组。

3、’false’ 表示数据不需要分组，’true’ 表示数据需要分组，使用optgroup标签分组。

三、formselects v4 赋值

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

    
        option1
        option2

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

四、formselects无法回显

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

1、html模板中可能没有设置selected标签，使用时需要判断是否设置。

2、使用ajax调用数据，需要在ajax成功回调中设置selected属性标记选中值。

3、在后台传递到html模板中的值格式，不一定是需要的options格式，需要调整一下格式。

五、formselects无法赋值

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

1、在html模板中选择器id或name属性设置错误或发生变化。

2、formSelects使用了2个异步请求的插件，需要注意2个插件必须引入。

六、formselects默认选中

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

1、在html模板中设置selected属性。

2、在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等多个方面进行了阐述。希望对读者有所帮助，同时建议开发者可以多多使用、实践、调试，熟悉插件的各种功能，提高开发效率。

原创文章，作者：MHHXS，如若转载，请注明出处：https://www.506064.com/n/369234.html