I am using form edit using JQ Grid. The data on the 2nd drop box will be populated dynamically based on the value on first

Please help, I am a new developer and I am using form edit. There are two drop down boxes in the form using JQ Grid. The data on the second drop down will be populated dynamically based on the value on first drop box. I had been reading related topics here and tried those codes but still it didn't worked for me. Here are my codes. The value of the MedicineName depends on what is the value of the MedicineType choose by the user. Please help, where did I went wrong with my codes? I followed what is posted by others here but still it populate all the lists of medicine names without considering the value of the first drop box. :( You're help is highly appreciated. Thanks

 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").editGridR开发者_运维知识库ow(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."); } });

Look at the demos: this and this from the old answer and another one. The demos show how one can implement dependent selects in form editing, inline editing and in the toolbar search.

In resetMedValues you use grid.setColProp('MedicineName'... althought you do not have any column with that name. This is definitely a false.