formselects詳解

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等多個方面進行了闡述。希望對讀者有所幫助，同時建議開發者可以多多使用、實踐、調試，熟悉插件的各種功能，提高開發效率。