Why does the edit form in jqGrid display incorrect option values in select boxes when editing records?

Incorrect Select Drop Down Option Values in Edit Box

When using form edit in jqGrid, it's possible to encounter incorrect option values in select boxes when editing records. Specifically, values may start from 0 instead of the correct start value.

Issue Description

Consider the following scenario:

• Two select boxes are present: Country and State.
• State select box options depend on the selected country.
• For instance, "Country: US (option value=1)" has state options with values starting from 1 ("Alabama: option value=1").

When editing a record where the country is UK (option value=2) and the state is Oxford (option value=6), the edit form will initially display the correct country and state. However, when the state select box is opened, the option values will be incorrect and start from 0. The correct option values should start from 5.

Cause

The root cause is that the value of the editoptions for select boxes is used only once during initialization. In cases where options for the second select box are populated dynamically based on the first select box's value, it's necessary to update the second select box's options manually.

Solution

To resolve this issue, we'll follow these steps:

1. Reset the initial option values of the second select box to a static list (e.g., all available states).
2. When the value of the first select box changes, rebuild the options for the second select box based on the selected country.
3. Use dataEvents to handle changes in the first select box and trigger the rebuilding of the second select box.

Code Example

<code class="javascript">resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
   // ... other configuration options
   editoptions: {
       value: countries,
       dataEvents: [
           {
               type: 'change',
               fn: function(e) {
                   resetStatesValues();

                   var countryId = $(e.target).val();
                   var sc = statesOfCountry[countryId];
                   var newOptions = '';
                   for (var stateId in sc) {
                       newOptions += '<option value="' +
                                  stateId + '">' +
                                  states[stateId] + '</option>';
                   }

                   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);
                   }
               }
           }
       ]
   }
});</code>

By implementing these steps, we ensure that the option values of the second select box are always accurate based on the selected country in the first select box.

The above is the detailed content of Why does the edit form in jqGrid display incorrect option values in select boxes when editing records?. For more information, please follow other related articles on the PHP Chinese website!