请帮忙，我是新开发者，我正在使用表单编辑。使用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."); } });
答案 0 :(得分：0)
查看来自this和this的演示：the old answer和another one。演示展示了如何在form editing，inline editing和toolbar search中实现相关选择。
答案 1 :(得分：0)
在resetMedValues中，您使用grid.setColProp('MedicineName'...，但您没有任何具有该名称的列。这绝对是错误的。