jqGrid 編集フォームの状態選択ボックスのオプション値が正しくないのはなぜですか?

編集ボックスでの jqgrid の選択ドロップダウン オプション値が間違っています

編集フォームで国と州の値を正しく選択しているにもかかわらず、オプションの値が州選択ボックスに表示されますフォーム編集時に正しくありません。この問題は、米国の国を選択した後に英国の国に戻った場合でも発生します。

州選択ボックスの間違ったオプション値を解決する方法

この問題を解決するには、正しく行う必要があります。編集フォームが読み込まれるときに、選択した国の値に基づいて州選択ボックスに値を入力します。このアプローチには次のものが含まれます。

1. dataInit 関数での国選択に基づいて州の値を設定します。
2. 国が変更された場合は州選択ボックスを再構築します。

コード ソリューション

<code class="javascript">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 resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};

$("#list").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) {
                    setStateValues($(elem).val());
                },
                dataEvents: [
                    { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                    { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                ]
            }
        },
        {
            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: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // edit options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // add options
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });</code>

Notes

• 列のプロパティを設定するには、grid.setColProp(...) メソッドが使用されます。
• dataInit関数は、選択ボックスを初期化し、オプションを設定するために使用されます。
• dataEvents 配列は、選択ボックスにイベント ハンドラーを付加するために使用されます。

以上がjqGrid 編集フォームの状態選択ボックスのオプション値が正しくないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。