我正在使用 JQ Grid 进行表单编辑。第二个下拉框中的数据将根据第一个下拉框的值动态填充

Question

请帮助，我是新开发人员，我正在使用表单编辑。使用JQ Grid 的表单中有两个下拉框。第二个下拉列表中的数据将根据第一个下拉框中的值动态填充。我一直在这里阅读相关主题并尝试了这些代码，但它仍然对我不起作用。这是我的代码。 MedicineName 的值取决于用户选择的 MedicineType 的值。请帮忙，我的代码哪里出了问题？我遵循了其他人在这里发布的内容，但它仍然填充了所有药物名称列表，而不考虑第一个下拉框的值。 :( 非常感谢您的帮助。谢谢

 var MedicineType = { 'allergy': 'For Allergy / Itchiness', 'asthma': 'For Asthmatic Attacks','colds': 'For Colds / Cough', 'eye': 'For Eye Redness / Irritation','fever': 'For Fever and Pain','hyperacid': 'For Hyperacidity / Abdominal Pain' };
 var MedicineName = { '1':'Paracetamol (Tempra 250mg/mL) syrup','2':'Paracetamol (Biogesic 250mg/mL) Syrup','3':'Paracetamol (Biogesic 500mg) tab','4':'Mefenamic Acid 250mg tab','5':'Mefenamic Acid 500mg tab','6':'Neozep Non-drowsy 10mg/500mg tab','7':'Carbocistene 500mg cap','8':'Loratadine (Allerta) 5mg/5ml syrup','9':'Loratidine 10mg tab','10':'Eye mo Eye drops','11':'Isonep Eye drops','12':'Tums 500mg tab','13':'Buscopan 10mg tab','14':'Buscopan Plus 10mg/500mg tab','15':'Salbutamol Nebulization' };
 var MedicineTypecode = {
   fever: { '1': 'Paracetamol (Tempra 250mg/mL) syrup', '2': 'Paracetamol (Biogesic 250mg/mL) Syrup','3': 'Paracetamol (Biogesic 500mg) tab' ,'4': 'Mefenamic Acid 250mg tab','5': 'Mefenamic Acid 500mg tab'},
   colds: { '6': 'Neozep Non-drowsy 10mg/500mg tab', '7': 'Carbocistene 500mg cap' },
   allergy: { '8': 'Loratadine (Allerta) 5mg/5ml syrup', '9': 'Loratidine 10mg tab' },
   eye: { '10': 'Eye mo Eye drops','11': 'Eye mo Eye drops' },
   hyperacid: { '12': 'Tums 500mg tabs','13': 'Buscopan 10mg tab','14': 'Buscopan Plus 10mg/500mg tab'  }, 
   asthma: { '15': 'Salbutamol Nebulization' }};

 var lastSel = -1;
 var grid = jQuery("#ClinicAvailMed");
 var resetMedValues = function () {
    grid.setColProp('MedicineName', { editoptions: { value: MedicineTypecode } });
 };


        $("#ClinicAvailMed").jqGrid({

            datatype: "local",
            height: 100,
            width: 700,
            colNames: ['ClinicAvailmed','MEDICINE TYPE','MEDICINES'],
            colModel: [
                { name: 'ClinicAvailmed', index: 'ClinicAvailmed', sorttype: "int", editable: true, editoptions: { readonly: true, size: 2} },
                { name: 'MedTypeCode', index:'MedTypeCode', width: "50%", editable: true,  formatter: 'select', edittype: "select", editoptions: {  value: MedicineType ,dataInit: function (elem) {
                var v = $(elem).val();
                grid.setColProp('MedicineName', { editoptions: { value: MedicineTypecode [v]} });},dataEvents: [ {type: 'select', fn: function(e) {resetMedValues();
                        var v = parseInt($(e.target).val(), 10);
                        var sc = MedicineTypecode [v];
                        var newOptions = '';
                        for (var medId in sc) {
                            if (sc.hasOwnProperty(medId)) {
                                newOptions += '<option role="option" value="' +
                                              medId + '">' +
                                              med[medId] + '</option>';
                            }  }

                    if ($(e.target).is('.FormElement')) {
                            // form editing
                            var form = $(e.target).closest('form.FormGrid');
                            $("select#MedicineName.FormElement", form[0]).html(newOptions);
                        } else {
                            // inline editing
                            var row = $(e.target).closest('tr.jqgrow');
                            var rowId = row.attr('id');
                            $("select#" + rowId + "_MedicineName", row[0]).html(newOptions);
                        } } } ] }},

              { name: 'Medcode', index: 'Medcode', width: "50%", editable: true, edittype: "select", editoptions: { value: MedicineName} }, ],
         onSelectRow: function (id) {
        if (id && id !== lastSel) {
        if (lastSel != -1) {
            resetMedValues();
            grid.restoreRow(lastSel);
        }
        lastSel = id;
            } },
        ondblClickRow: function (id, ri, ci) {
            if (id && id !== lastSel) {
                grid.restoreRow(lastSel);
                lastSel = id;
            }
            resetMedValues();
            grid.editRow(id, true, null, null, 'clientArray', null,
                            function (rowid, response) {  // aftersavefunc
                                grid.setColProp('MedicineName', { editoptions: { value: MedicineTypecode } }); });
              return; },

            multiselect: false,
            caption: " ",
            editurl: "handlers/store.ashx?table=ClinicAvailMed",
            ondblClickRow: function(id) { { $("#ClinicAvailMed").editGridRow(id, { modal: true, drag: true, addCaption: "Add Medicine", editCaption: "Edit Medicine", bSubmit: "OK", bCancel: "Close", closeAfterEdit: true }); } }

        });
        $("#ClinicAvailMed").jqGrid('hideCol', 'ClinicAvailmed');
        $("#btnAddClinicAmed").click(function() { $("#ClinicAvailMed").editGridRow('new', { modal: true, drag: true, addCaption: "Add Medicine", editCaption: "Edit Medicine", bSubmit: "OK", bCancel: "Close", closeAfterEdit: true, addedrow: 'last' }); });
        $("#btnEditClinicAmed").click(function() {
        var _selectedRow = $("#ClinicAvailMed").getGridParam('selrow');
        if (_selectedRow != null) { $("#ClinicAvailMed").editGridRow(_selectedRow, { modal: true, drag: true, addCaption: "Add Medicine", editCaption: "Edit Medicine", bSubmit: "OK", bCancel: "Close", closeAfterEdit: true }); }
            else { alert("Please select the row which you want to edit."); }});
        $("#btnDeleteClinicAmed").click(function() {
        var _selectedRow = $("#ClinicAvailMed").getGridParam('selrow');
        if (_selectedRow != null) { $("#ClinicAvailMed").delGridRow(_selectedRow, { drag: true, msg: "Delete the row(s)?", caption: "Delete", bSubmit: "Yes", bCancel: "Close", modal: true }); }
        else { alert("Please select the row which you want to edit."); } });

Answer 1

查看演示：this 和 此 来自 旧答案和另一个。这些演示展示了如何在表单编辑中实现依赖选择、 内联编辑 和工具栏搜索。

Answer 2

在 resetMedValues 中，您使用 grid.setColProp('MedicineName'... ，尽管您没有任何具有该名称的列。这绝对是错误的。