在 jqGrid 中載入編輯表單時，如何根據所選國家/地區使用正確的選項填入州下拉清單？

jqgrid 之編輯框中下拉選項的值不正確

在進行表單編輯時，需要在表單中使用兩個下拉框。第一個下拉框選擇國家，第二個下拉框選擇對應國家所屬的州。國家下拉框中的選項值等同於國家的 id，而州下拉框中的選項值與國家的 id 相關。例如：

國：

美国 (选项值=1)
英国 (选项值=2)

美國所屬州：

阿拉巴马州 (选项值=1)
加利福尼亚州 (选项值=2)
佛罗里达州 (选项值=3)
夏威夷州 (选项值=4)

英國所屬州：

伦敦 (选项值=5)
牛津 (选项值=6)

可以看出，英國所屬的州的選項值從5 開始。當編輯記錄中包含國家 id=2（英國）和州 id=6（牛津）時，編輯表單顯示正確－國家為英國，而州為牛津。但是，如果展開狀態下拉框，發現選項文字正確（顯示倫敦和牛津），但選項值從 0 開始。正確的結果應該是，該選項值從 5 開始。

如果選擇並更改國家下拉框為美國，再更改回英國時，選項值將被正確填充（從 5 開始）。

問題：

當使用編輯框載入編輯表單時，如何根據國家來正確填滿狀態下拉框中的選項值？

回答：

您問題的答案取決於您從何處獲取「美國所屬州」和「英國所屬州」的資訊。 jqGrid 支援兩種可能性：1) 使用 editoptions 的 value 參數，或 2) 使用 editoptions 的 dataUrl 和 buildSelect 參數。第一種方法最適合本地編輯或可能選項清單是靜態的情況。第二種方法用於從資料庫中透過 AJAX 請求獲取國家、州以及某個國家所屬州的資訊的情況。以下範例示範了解決方案的第一種情況（使用 value 參數）：

為了避免對伺服器元件產生依賴，可以使用本機範例。 dataInit 函數中會覆寫 value，但在第一個 select/drop-down 方塊中變更值後，需要手動重建第二個 select/drop-down 方塊。要做到這一點，需要了解 select HTML 元素的 id 由表格行 id '_' 和列名組成：rowId "_State"。此外，重要的是 editoptions 的值必須重設為初始值，以便於解碼任何狀態 id 為狀態名稱。

以下範例程式碼：

var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
    1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    2: { '5': 'London', '6': 'Oxford' }
};
var mydata = [
    { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
    { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
    { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
    { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
];

var lastSel = -1;
var grid = jQuery("#list");
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { name: 'Country', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    // 为了拥有与国家对应的选项列表，我们需要暂时更改列属性
                    grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            // 为了能够保存当前选择的查看结果，列属性值至少应该包含
                            // 当前选定的状态。因此，我们必须将列属性重置为以下值
                            //grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
                            //grid.setColProp('State', { editoptions: { value: states} });
                            resetStatesValues();

                            // 根据选定的国家值创建状态选项
                            var v = parseInt($(e.target).val(), 10);
                            var sc = statesOfCountry[v];
                            var newOptions = '';
                            for (var stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' +
                                                  stateId + '">' +
                                                  states[stateId] + '</option>';
                                }
                            }

                            // 填充新值到 select/drop-down
                            if ($(e.target).is('.FormElement')) {
                                // 表单编辑
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // 内联编辑
                                var row = $(e.target).closest('tr.jqgrow');
                                var rowId = row.attr('id');
                                $("select#" + rowId + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id &amp;&amp; id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id &amp;&amp; id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.editRow(id, true, null, null, 'clientArray', null,
                        function (rowid, response) {  // aftersavefunc
                            grid.setColProp('State', { editoptions: { value: states} });
                        });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "使用依赖 select/drop-down 列表（双击编辑）"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // 编辑选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // 添加选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });

更新：

將上述程式碼更新為表單編輯情況下也能正常運作。由於 jqGrid 不支援表單編輯的本機編輯，因此無法測試程式碼。不過，希望我已經做出了所需更改的大部分。

更新 2：

已擴充上述程式碼以支援：

1. 內嵌編輯、表單編輯、搜尋工具列和進階搜尋
2. 編輯表單中的上一個或下一個導覽按鈕
3. 改善了不同瀏覽器中選擇內的鍵盤支援（修正了在某些瀏覽器中刷新依賴select 的問題）

演示的最新版本可以在[此處](http://www.trirand.com/blog/ jqgrid/jqgridfromformwithdependseditboxes.html)找到。

以下修改後的示範程式碼：

美国 (选项值=1)
英国 (选项值=2)

以上是在 jqGrid 中載入編輯表單時，如何根據所選國家/地區使用正確的選項填入州下拉清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！