我需要使用jqgrid加载一个依赖的下拉列表。这是我的代码的一部分(我正在使用MVC)
{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataEvents: [{
type: 'change',
fn: function (e) {
var varIDUnidadMedida = e.currentTarget.value;
newOptions = '';
var arrPlazos = $.ajax({
url: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
async: false
}).responseText;
var response = jQuery.parseJSON(arrPlazos);
for (var i = 0; i < response.length; i++) {
newOptions += '<option value="' + response[i].Value + '">' + response[i].Text + '</option>';
}
$('parPlazo').html(newOptions);
}
}]
}
},
{ name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1
}
},
如您所见,parIDUnidadMedida选择控制更改是否必须更新parPlazo ...
你帮我吗?我不知道如何解决它。问候。
答案 0 :(得分:0)
好的...在找到答案之后我得到了它.. 你看我做了一些小修正,但主要原因因为它不起作用是因为我从未加载过第二个下拉列表(parPlazo)。所以select parPlazo没有id或名字。显然它永远不会达到
这是代码。我希望这可以帮助你。 此致
{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataEvents: [{
type: 'change',
fn: function (e) {
var varIDUnidadMedida = e.currentTarget.value;
$.ajax({
url: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
type: 'GET',
success: function (PlazosJson) {
var plazos = eval(PlazosJson);
var plazosHtml = "";
$(plazos).each(function (i, option) {
plazosHtml += '<option value="' + option.Value + '">' + option.Text + '</option>';
});
// Poblar los datos
if ($(e.target).is('.FormElement')) {
// En caso de se formulario de edicion, añadir
var form = $(e.target).closest('form.FormGrid');
$("select#parPlazo.FormElement", form[0]).html(plazosHtml);
} else {
// Edicion de una linea
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
var rowId = jQuery("#grid").jqGrid('getGridParam', 'selrow');
jQuery("select#" + rowId + "_parPlazo").append(plazosHtml);
}
}
});
}
}]
}
},
{ name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/1',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
}
}
},