Liste déroulante dépendante jqgrid

Question

J'ai besoin de charger une liste déroulante dépendante de jqgrid. Voici une partie de mon code (j'utilise 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 
        } 
       }, 

Comme vous pouvez le voir si le changement de contrôle de sélection parIDUnidadMedida puis parPlazo doit être mis à jour ...

Pouvez-vous me aider ?? Je ne sais pas comment le résoudre.

Cordialement.

Answer 1

Ok ... après avoir cherché une réponse je l'ai eu .. Vous voyez que j'ai fait quelques corrections mineures, mais la raison principale parce que cela n'a pas fonctionné parce que je n'ai jamais chargé la deuxième liste déroulante (parPlazo) . Donc le select parPlazo n'a pas d'identifiant ou de nom. Évidemment, il ne doit jamais être atteint

Voici le code. J'espère que ceci vous aide. Cordialement

{ 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>"; 
         } 
        } 
       },