编辑框中不正确的选择下拉选项值

Question

编辑框中不正确的选择下拉选项值

我正在使用表单编辑。表单中有两个复选框。一个复选框是国家，另一个复选框是国家。状态复选框取决于选定的国家，并将动态填充。例如：

国家：

美国(期权价值=1)
英国(期权价值=2)

国家代表美国：

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

联合王国国家：

伦敦(期权价值=5)
牛津(期权价值=6)

如上文所示，英国的id以5开头。Country id=2 (UK)和State id=6 (Oxford)，编辑表格将正确显示-国家是英国和国家是牛津。但是，如果您下拉状态复选框，选项文本是正确的(它显示伦敦、牛津)，但是选项值将从0开始。正确的是，选项值应该从5开始。

如果选择并将“国家”下拉框更改为“US”，然后再次更改为“英国”，则选项值将被正确填充(从5开始)。

我的问题是，在加载编辑表单时，如何使用基于编辑框中国家的正确选项值填充状态的选择框？

Answer 1

你的问题的答案在一定程度上取决于你收到的“美国国家”和“英国国家”下显示的信息的来源。jqGrid支持的两种可能性：1)使用value参数编辑选项2)使用dataUrl和buildSelect参数的编辑选项..第一种方法是在本地编辑的情况下最好的方法，或者如果可能的选项列表是静态的。在这种情况下，将使用第二个选择，即每个Ajax请求将从数据库获取有关国家、国家和国家的信息。我在示例中描述了解决方案-使用value参数不依赖于服务器组件。的情况下，实现的大部分是相同的。dataUrl和buildSelect.我做了活生生的例子这证明了你所需要的。主要问题是value.的.editoptions使用只有一次在初始化的时候。在.内部dataInit函数一可以覆盖value但是，在第一个“选择/下拉”框中的值随国家更改后，必须手动重建带有状态的第二个“选择/下拉”框。要做到这一点，我们必须理解，SELECT HTML元素的id是由行id‘_’和列名：rowId+“_State”构造的。而且重要的是value.的.editoptions必须将其重置为初始值，以便可以将任何状态id解码为状态名称。这是来自例子:var&nbsp;countries&nbsp;=&nbsp;{&nbsp;'1':&nbsp;'US',&nbsp;'2':&nbsp;'UK'&nbsp;};var&nbsp;states&nbsp;=&nbsp;{&nbsp;'1':&nbsp;'Alabama',&nbsp;'2':&nbsp;'California',&nbsp;'3':&nbsp;'Florida',&nbsp;'4':&nbsp;'Hawaii',&nbsp;'5':&nbsp;'London',&nbsp; 6':&nbsp;'Oxford'&nbsp;};var&nbsp;statesOfCountry&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;1:&nbsp;{&nbsp;'1':&nbsp;'Alabama',&nbsp;'2':&nbsp;'California',&nbsp;'3':&nbsp;'Florida',&nbsp;'4':&nbsp;'Hawaii'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;2:&nbsp;{&nbsp;'5':&nbsp;'London',&nbsp;'6':&nbsp;'Oxford'&nbsp;}};var&nbsp;mydata&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'0',&nbsp;Country:&nbsp;'1',&nbsp;State:&nbsp;'1',&nbsp;Name:&nbsp;"Louise&nbsp;Fletcher"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'1',&nbsp;Country:&nbsp;'1',&nbsp;State:&nbsp;'3',&nbsp;Name:&nbsp;"Jim&nbsp;Morrison"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'2',&nbsp;Country:&nbsp;'2',&nbsp;State:&nbsp;'5',&nbsp;Name:&nbsp;"Sherlock&nbsp;Holmes"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'3',&nbsp;Country:&nbsp;'2',&nbsp;State:&nbsp;'6',&nbsp;Name:&nbsp;"Oscar&nbsp;Wilde"&nbsp;}];var&nbsp;lastSel&nbsp;=&nbsp;-1;var&nbsp;grid&nbsp;=&nbsp;jQuery("#list");var&nbsp;resetStatesValues&nbsp;= &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;grid.setColProp('State',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states}&nbsp;});};grid.jqGrid({ &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;mydata, &nbsp;&nbsp;&nbsp;&nbsp;datatype:&nbsp;'local', &nbsp;&nbsp;&nbsp;&nbsp;colModel:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'Name',&nbsp;width:&nbsp;200&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'Country',&nbsp;width:&nbsp;100,&nbsp;editable:&nbsp;true,&nbsp;formatter:&nbsp;'select', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edittype:&nbsp;'select',&nbsp;editoptions:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;countries, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataInit:&nbsp;function&nbsp;(elem)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v&nbsp;=&nbsp;$(elem).val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;to&nbsp;have&nbsp;short&nbsp;list&nbsp;of&nbsp;options&nbsp;which&nbsp;corresponds&nbsp;to&nbsp;the&nbsp;country &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;from&nbsp;the&nbsp;row&nbsp;we&nbsp;have&nbsp;to&nbsp;change&nbsp;temporary&nbsp;the&nbsp;column&nbsp;property &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.setColProp('State',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;statesOfCountry[v]}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataEvents:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'change', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fn:&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;To&nbsp;be&nbsp;able&nbsp;to&nbsp;save&nbsp;the&nbsp;results&nbsp;of&nbsp;the&nbsp;current&nbsp;selection &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;value&nbsp;of&nbsp;the&nbsp;column&nbsp;property&nbsp;must&nbsp;contain&nbsp;at&nbsp;least &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;current&nbsp;selected&nbsp;'State'.&nbsp;So&nbsp;we&nbsp;have&nbsp;to&nbsp;reset &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;column&nbsp;property&nbsp;to&nbsp;the&nbsp;following &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//grid.setColProp('State',&nbsp;{&nbsp;editoptions:{value:&nbsp;statesOfCountry[v]}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//grid.setColProp('State',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;build&nbsp;'State'&nbsp;options&nbsp;based&nbsp;on&nbsp;the&nbsp;selected&nbsp;'Country'&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v&nbsp;=&nbsp;parseInt($(e.target).val(),&nbsp;10); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sc&nbsp;=&nbsp;statesOfCountry[v]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;newOptions&nbsp;=&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;stateId&nbsp;in&nbsp;sc)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(sc.hasOwnProperty(stateId))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newOptions&nbsp;+=&nbsp;'<option&nbsp;role="option"&nbsp;value="'&nbsp;+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stateId&nbsp;+&nbsp;'">'&nbsp;+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;states[stateId]&nbsp;+&nbsp;'</option>'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;populate&nbsp;the&nbsp;new &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($(e.target).is('.FormElement'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;form&nbsp;editing &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form&nbsp;=&nbsp;$(e.target).closest('form.FormGrid'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("select#State.FormElement",&nbsp;form[0]).html(newOptions); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;inline&nbsp;editing &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;row&nbsp;=&nbsp;$(e.target).closest('tr.jqgrow'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rowId&nbsp;=&nbsp;row.attr('id'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("select#"&nbsp;+&nbsp;rowId&nbsp;+&nbsp;"_State",&nbsp;row[0]).html(newOptions); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'State',&nbsp;width:&nbsp;100,&nbsp;editable:&nbsp;true,&nbsp;formatter:&nbsp;'select', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;edittype:&nbsp;'select',&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;onSelectRow:&nbsp;function&nbsp;(id)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(id&nbsp;&&&nbsp;id&nbsp;!==&nbsp;lastSel)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(lastSel&nbsp;!=&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.restoreRow(lastSel); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastSel&nbsp;=&nbsp;id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;ondblClickRow:&nbsp;function&nbsp;(id,&nbsp;ri,&nbsp;ci)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(id&nbsp;&&&nbsp;id&nbsp;!==&nbsp;lastSel)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.restoreRow(lastSel); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastSel&nbsp;=&nbsp;id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.editRow(id,&nbsp;true,&nbsp;null,&nbsp;null,&nbsp;'clientArray',&nbsp;null, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;(rowid,&nbsp;response)&nbsp;{&nbsp;&nbsp;//&nbsp;aftersavefunc &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.setColProp('State',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;editurl:&nbsp;'clientArray', &nbsp;&nbsp;&nbsp;&nbsp;sortname:&nbsp;'Name', &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;'100%', &nbsp;&nbsp;&nbsp;&nbsp;viewrecords:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;rownumbers:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;sortorder:&nbsp;"desc", &nbsp;&nbsp;&nbsp;&nbsp;pager:&nbsp;'#pager', &nbsp;&nbsp;&nbsp;&nbsp;caption:&nbsp;"Demonstrate&nbsp;dependend&nbsp;select/dropdown&nbsp;lists&nbsp;(edit&nbsp;on&nbsp;double-click)"}).jqGrid('navGrid','#pager',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;edit:&nbsp;true,&nbsp;add:&nbsp;true,&nbsp;del:&nbsp;false,&nbsp;search:&nbsp;false,&nbsp;refresh:&nbsp;false&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;//&nbsp;edit&nbsp;options &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recreateForm:true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClose:function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;//&nbsp;add&nbsp;options &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recreateForm:true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClose:function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});更新：我更新了上面的代码，使它在表单编辑的情况下也可以使用。你可以看到它的实况这里..因为jqGrid不支持表单编辑的本地编辑，所以我无法测试代码。尽管如此，我还是希望我能充分利用所需的改变。更新2*我扩展了上述代码以支持内联编辑、表单编辑、搜索工具栏和高级搜索编辑窗体中的前一个或下一个导航按钮。改进在SELECT中的键盘支持(在某些浏览器中更新依赖的SELECT问题是固定的)演示的新版本是这里..演示的修改代码如下：var&nbsp;countries&nbsp;=&nbsp;{&nbsp;'1':&nbsp;'US',&nbsp;'2':&nbsp;'UK'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//allCountries&nbsp;=&nbsp;{'':&nbsp;'All',&nbsp;'1':&nbsp;'US',&nbsp;'2':&nbsp;'UK'}, &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;we&nbsp;use&nbsp;string&nbsp;form&nbsp;of&nbsp;allCountries&nbsp;to&nbsp;have&nbsp;control&nbsp;on&nbsp;the&nbsp;order&nbsp;of&nbsp;items &nbsp;&nbsp;&nbsp;&nbsp;allCountries&nbsp;=&nbsp;':All;1:US;2:UK', &nbsp;&nbsp;&nbsp;&nbsp;states&nbsp;=&nbsp;{&nbsp;'1':&nbsp;'Alabama',&nbsp;'2':&nbsp;'California',&nbsp;'3':&nbsp;'Florida',&nbsp;'4':&nbsp;'Hawaii',&nbsp;'5':&nbsp;'London',&nbsp;'6':&nbsp;'Oxford'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;allStates&nbsp;=&nbsp;':All;1:Alabama;2:California;3:Florida;4:Hawaii;5:London;6:Oxford', &nbsp;&nbsp;&nbsp;&nbsp;statesOfUS&nbsp;=&nbsp;{&nbsp;'1':&nbsp;'Alabama',&nbsp;'2':&nbsp;'California',&nbsp;'3':&nbsp;'Florida',&nbsp;'4':&nbsp;'Hawaii'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;statesOfUK&nbsp;=&nbsp;{&nbsp;'5':&nbsp;'London',&nbsp;'6':&nbsp;'Oxford'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;next&nbsp;maps&nbsp;contries&nbsp;by&nbsp;ids&nbsp;to&nbsp;states &nbsp;&nbsp;&nbsp;&nbsp;statesOfCountry&nbsp;=&nbsp;{&nbsp;'':&nbsp;states,&nbsp;'1':&nbsp;statesOfUS,&nbsp;'2':&nbsp;statesOfUK&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;mydata&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'0',&nbsp;country:&nbsp;'1',&nbsp;state:&nbsp;'1',&nbsp;name:&nbsp;"Louise&nbsp;Fletcher"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'1',&nbsp;country:&nbsp;'1',&nbsp;state:&nbsp;'3',&nbsp;name:&nbsp;"Jim&nbsp;Morrison"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'2',&nbsp;country:&nbsp;'2',&nbsp;state:&nbsp;'5',&nbsp;name:&nbsp;"Sherlock&nbsp;Holmes"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;id:&nbsp;'3',&nbsp;country:&nbsp;'2',&nbsp;state:&nbsp;'6',&nbsp;name:&nbsp;"Oscar&nbsp;Wilde"&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;lastSel&nbsp;=&nbsp;-1, &nbsp;&nbsp;&nbsp;&nbsp;grid&nbsp;=&nbsp;$("#list"), &nbsp;&nbsp;&nbsp;&nbsp;removeAllOption&nbsp;=&nbsp;function&nbsp;(elem)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;elem&nbsp;===&nbsp;"object"&nbsp;&&&nbsp;typeof&nbsp;elem.id&nbsp;===&nbsp;"string"&nbsp;&&&nbsp;elem.id.substr(0,&nbsp;3)&nbsp;!==&nbsp;"gs_")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;in&nbsp;the&nbsp;searching&nbsp;bar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(elem).find('option[value=""]').remove(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;set&nbsp;'value'&nbsp;property&nbsp;of&nbsp;the&nbsp;editoptions&nbsp;to&nbsp;initial&nbsp;state &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.jqGrid('setColProp',&nbsp;'state',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;setStateValues&nbsp;=&nbsp;function&nbsp;(countryId)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;to&nbsp;have&nbsp;short&nbsp;list&nbsp;of&nbsp;options&nbsp;which&nbsp;corresponds&nbsp;to&nbsp;the&nbsp;country &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;from&nbsp;the&nbsp;row&nbsp;we&nbsp;have&nbsp;to&nbsp;change&nbsp;temporary&nbsp;the&nbsp;column&nbsp;property &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.jqGrid('setColProp',&nbsp;'state',&nbsp;{&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;statesOfCountry[countryId]}&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;changeStateSelect&nbsp;=&nbsp;function&nbsp;(countryId,&nbsp;countryElem)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;build&nbsp;'state'&nbsp;options&nbsp;based&nbsp;on&nbsp;the&nbsp;selected&nbsp;'country'&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;stateId,&nbsp;stateSelect,&nbsp;parentWidth,&nbsp;$row, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$countryElem&nbsp;=&nbsp;$(countryElem), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sc&nbsp;=&nbsp;statesOfCountry[countryId], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isInSearchToolbar&nbsp;=&nbsp;$countryElem.parent().parent().parent().hasClass('ui-search-toolbar'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//$(countryElem).parent().parent().hasClass('ui-th-column') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newOptions&nbsp;=&nbsp;isInSearchToolbar&nbsp;?&nbsp;'<option&nbsp;value="">All</option>'&nbsp;:&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(stateId&nbsp;in&nbsp;sc)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(sc.hasOwnProperty(stateId))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newOptions&nbsp;+=&nbsp;'<option&nbsp;role="option"&nbsp;value="'&nbsp;+&nbsp;stateId&nbsp;+&nbsp;'">'&nbsp;+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;states[stateId]&nbsp;+&nbsp;'</option>'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setStateValues(countryId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;populate&nbsp;the&nbsp;subset&nbsp;of&nbsp;contries &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isInSearchToolbar)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;searching&nbsp;toolbar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$row&nbsp;=&nbsp;$countryElem.closest('tr.ui-search-toolbar'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stateSelect&nbsp;=&nbsp;$row.find(">th.ui-th-column&nbsp;select#gs_state"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parentWidth&nbsp;=&nbsp;stateSelect.parent().width(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stateSelect.html(newOptions).css({width:&nbsp;parentWidth}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;($countryElem.is('.FormElement'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;form&nbsp;editing &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$countryElem.closest('form.FormGrid').find("select#state.FormElement").html(newOptions); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;inline&nbsp;editing &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$row&nbsp;=&nbsp;$countryElem.closest('tr.jqgrow'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("select#"&nbsp;+&nbsp;$.jgrid.jqID($row.attr('id'))&nbsp;+&nbsp;"_state").html(newOptions); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;editGridRowOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recreateForm:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclickPgButtons:&nbsp;function&nbsp;(whichButton,&nbsp;$form,&nbsp;rowid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$row&nbsp;=&nbsp;$('#'&nbsp;+&nbsp;$.jgrid.jqID(rowid)),&nbsp;countryId; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(whichButton&nbsp;===&nbsp;'next')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$row&nbsp;=&nbsp;$row.next(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(whichButton&nbsp;===&nbsp;'prev')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$row&nbsp;=&nbsp;$row.prev(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($row.length&nbsp;>&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;countryId&nbsp;=&nbsp;grid.jqGrid('getCell',&nbsp;$row.attr('id'),&nbsp;'country'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeStateSelect(countryId,&nbsp;$("#country")[0]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClose:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;};grid.jqGrid({ &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;mydata, &nbsp;&nbsp;&nbsp;&nbsp;datatype:&nbsp;'local', &nbsp;&nbsp;&nbsp;&nbsp;colModel:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'name',&nbsp;width:&nbsp;200,&nbsp;editable:&nbsp;true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'country',&nbsp;width:&nbsp;100,&nbsp;editable:&nbsp;true,&nbsp;formatter:&nbsp;'select',&nbsp;stype:&nbsp;'select',&nbsp;edittype:&nbsp;'select', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchoptions:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;allCountries, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataInit:&nbsp;function&nbsp;(elem)&nbsp;{&nbsp;removeAllOption(elem);&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataEvents:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;type:&nbsp;'change',&nbsp;fn:&nbsp;function&nbsp;(e)&nbsp;{&nbsp;changeStateSelect($(e.target).val(),&nbsp;e.target);&nbsp;}&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;type:&nbsp;'keyup',&nbsp;fn:&nbsp;function&nbsp;(e)&nbsp;{&nbsp;$(e.target).trigger('change');&nbsp;}&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editoptions:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;countries, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataInit:&nbsp;function&nbsp;(elem)&nbsp;{&nbsp;setStateValues($(elem).val());&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataEvents:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;type:&nbsp;'change',&nbsp;fn:&nbsp;function&nbsp;(e)&nbsp;{&nbsp;changeStateSelect($(e.target).val(),&nbsp;e.target);&nbsp;}&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;type:&nbsp;'keyup',&nbsp;fn:&nbsp;function&nbsp;(e)&nbsp;{&nbsp;$(e.target).trigger('change');&nbsp;}&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;name:&nbsp;'state',&nbsp;width:&nbsp;100,&nbsp;formatter:&nbsp;'select',&nbsp;stype:&nbsp;'select', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editable:&nbsp;true,&nbsp;edittype:&nbsp;'select',&nbsp;editoptions:&nbsp;{&nbsp;value:&nbsp;states&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchoptions:&nbsp;{&nbsp;value:&nbsp;allStates,&nbsp;dataInit:&nbsp;function&nbsp;(elem)&nbsp;{&nbsp;removeAllOption(elem);&nbsp;}&nbsp;}&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;], &nbsp;&nbsp;&nbsp;&nbsp;onSelectRow:&nbsp;function&nbsp;(id)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(id&nbsp;&&&nbsp;id&nbsp;!==&nbsp;lastSel)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(lastSel&nbsp;!==&nbsp;-1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).jqGrid('restoreRow',&nbsp;lastSel); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastSel&nbsp;=&nbsp;id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;ondblClickRow:&nbsp;function&nbsp;(id)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(id&nbsp;&&&nbsp;id&nbsp;!==&nbsp;lastSel)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).jqGrid('restoreRow',&nbsp;lastSel); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastSel&nbsp;=&nbsp;id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).jqGrid('editRow',&nbsp;id,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keys:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aftersavefunc:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;afterrestorefunc:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetStatesValues(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;editurl:&nbsp;'clientArray', &nbsp;&nbsp;&nbsp;&nbsp;sortname:&nbsp;'name', &nbsp;&nbsp;&nbsp;&nbsp;ignoreCase:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;'100%', &nbsp;&nbsp;&nbsp;&nbsp;viewrecords:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;rownumbers:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;sortorder:&nbsp;"desc", &nbsp;&nbsp;&nbsp;&nbsp;pager:&nbsp;'#pager', &nbsp;&nbsp;&nbsp;&nbsp;caption:&nbsp;"Demonstrate&nbsp;dependend&nbsp;select/dropdown&nbsp;lists&nbsp;(inline&nbsp;editing&nbsp;on&nbsp;double-click)"});grid.jqGrid('navGrid',&nbsp;'#pager',&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;del:&nbsp;false&nbsp;},&nbsp;editGridRowOptions,&nbsp;editGridRowOptions);grid.jqGrid('filterToolbar',&nbsp;{stringResult:&nbsp;true,&nbsp;searchOnEnter:&nbsp;t &nbsp;&nbsp;&nbsp;&nbsp;rue,&nbsp;defaultSearch&nbsp;:&nbsp;"cn"});更新3：演示代码的最后一个版本这里.

Answer 2

我正在使用表单编辑。表单中有三个复选框。一个复选框是国家，一个复选框是城市，另一个复选框是街道。“城市”复选框取决于所选国家，并将动态填充。“街道”复选框取决于所选城市，并将动态填充。我拯救了Mysql的Country、City、Street。如果选择“国家”，如何从MySQL表中更改“城市”复选框？

Answer 3

实际上，我已经得到了ON更改，选择了国家并正确填充了状态。没有问题。您的示例显示了行编辑，但我对表单编辑有问题(选择突出显示一行并单击铅笔图标)。我遇到的问题是，当表单出现时，选中的国家和选定的状态将正确显示在复选框中。状态的下拉框也正确填充。问题是，选项值的值从0开始，这是错误的