Heim > Web-Frontend > js-Tutorial > Warum sind die Optionswerte des Status-Auswahlfelds in meinem jqGrid-Bearbeitungsformular falsch?

Warum sind die Optionswerte des Status-Auswahlfelds in meinem jqGrid-Bearbeitungsformular falsch?

Linda Hamilton
Freigeben: 2024-11-01 12:56:02
Original
422 Leute haben es durchsucht

Why are the State select box option values incorrect in my jqGrid edit form?

jqgrid hat im Bearbeitungsfeld falsche Dropdown-Optionswerte ausgewählt

Obwohl die Länder- und Bundeslandwerte im Bearbeitungsformular korrekt ausgewählt wurden, werden die im Bundesland-Auswahlfeld angezeigten Optionswerte angezeigt sind falsch, wenn das Formular bearbeitet wird. Dieses Problem bleibt auch dann bestehen, wenn nach Auswahl des US-Landes wieder zum britischen Land gewechselt wird.

So beheben Sie falsche Optionswerte im Auswahlfeld „Bundesstaat“

Um dieses Problem zu beheben, ist eine korrekte Eingabe erforderlich Füllen Sie das Auswahlfeld „Bundesland“ basierend auf dem ausgewählten Länderwert aus, wenn das Bearbeitungsformular geladen wird. Der Ansatz umfasst:

  1. Auffüllen der Bundesstaatswerte basierend auf der Länderauswahl in der dataInit-Funktion.
  2. Neuaufbau des Bundesstaatsauswahlfelds, wenn das Land geändert wird.

Codelösung

<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>
Nach dem Login kopieren

Hinweise

  • Die Methode „grid.setColProp(...)“ wird zum Festlegen der Spalteneigenschaften verwendet.
  • Die dataInit Die Funktion wird verwendet, um das Auswahlfeld zu initialisieren und mit Optionen zu füllen.
  • Das dataEvents-Array wird verwendet, um Ereignishandler an das Auswahlfeld anzuhängen.

Das obige ist der detaillierte Inhalt vonWarum sind die Optionswerte des Status-Auswahlfelds in meinem jqGrid-Bearbeitungsformular falsch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage