在 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中文网其他相关文章！