在进行表单编辑时，需要在表单中使用两个下拉框。第一个下拉框选择国家，第二个下拉框选择对应国家所属的州。国家下拉框中的选项值等同于国家的 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 && id !== lastSel) {
if (lastSel != -1) {
resetStatesValues();
grid.restoreRow(lastSel);
}
lastSel = id;
}
},
ondblClickRow: function (id, ri, ci) {
if (id && 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：已扩展上述代码以支持：
演示的最新版本可以在[此处](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependseditboxes.html)找到。
以下修改后的演示代码：
美国 (选项值=1) 英国 (选项值=2)
以上是在 jqGrid 中加载编辑表单时，如何根据所选国家/地区使用正确的选项填充州下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！
