How to populate the state dropdown with the correct options based on the selected country when loading an edit form in jqGrid?

The value of the drop-down option in the edit box of jqgrid is incorrect

When editing the form, you need to use two drop-down boxes in the form. The first drop-down box selects the country, and the second drop-down box selects the state to which the corresponding country belongs. The option value in the country drop-down box is equivalent to the country's id, while the option value in the state drop-down box is related to the country's id. For example:

Country:

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

US state:

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

British state:

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

It can be seen that the option value of the British state is from 5 starts. When the edit record contains country id=2 (UK) and state id=6 (Oxford), the edit form displays correctly - the country is UK and the state is Oxford. However, if I expand the status dropdown box, I see that the option text is correct (London and Oxford are shown), but the option values ​​start at 0. The correct result should be that the option value starts from 5.

If you select and change the country dropdown to the United States, then change it back to the United Kingdom, the option values ​​will be populated correctly (starting at 5).

Question: When loading the edit form using the edit box, how to correctly populate the option values ​​in the status drop-down box according to the country?

Answer:

The answer to your question depends on where you get the information for "US states" and "UK states". jqGrid supports two possibilities: 1) using the value parameter of editoptions, or 2) using the dataUrl and buildSelect parameters of editoptions. The first method is best suited for local editing or where the list of options may be static. The second method is used when obtaining country, state, and state information for a country from the database through an AJAX request. The following example demonstrates the first case of the solution (using the value parameter):

To avoid dependencies on server components, you can use local examples. The value is overwritten in the dataInit function, but after changing the value in the first select/drop-down box, the second select/drop-down box needs to be manually rebuilt. To do this, you need to understand that the id of the select HTML element consists of the table row id '_' and the column name: rowId "_State". Additionally, it is important that the value of editoptions must be reset to its initial value in order to decode any state ids into state names.

Sample code below:

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();
              }
          });

Update: The above code has been updated to work properly in form editing situations as well. This code cannot be tested since jqGrid does not support local editing for form editing. Hopefully I've made most of the changes needed, though.

Update 2: The above code has been extended to support:

1. Inline editing, form editing, search toolbar and advanced search
2. Previous or next navigation buttons in edit forms
3. Improved selection within different browsers Keyboard support (fixes refresh select dependent issue in some browsers)

The latest version of the demo can be found [here](http://www.trirand.com/blog/ jqgrid/jqgridfromformwithdependseditboxes.html) found.

The following modified demo code:

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

The above is the detailed content of How to populate the state dropdown with the correct options based on the selected country when loading an edit form in jqGrid?. For more information, please follow other related articles on the PHP Chinese website!