Tengo cuadros desplegables dependientes como se muestra en el siguiente escenario. ¿Podría alguien sugerir cómo lograr el resultado usando JQuery/Javascript?Cajas desplegables dependientes de Jquery: cómo

Escenario:

HH1: 
    <select name="drop1"> 
     <option value="0"> 
     <option value="2"> 
     <option value="3"> 
     ...... 
     <option value="23"> 
    </select> 

HH2: 
    <select name="drop1"> 
     <option value="0"> 
     <option value="2"> 
     <option value="3"> 
     ...... 
     <option value="23"> 
    </select>

Edit: Lo siento me olvidó mencionar la opción de artículos se están pobladas a través de JavaScript (por bucle). Solo necesito saber cómo hacer HH2 dinámico basado en el valor seleccionado HH1.

Si el usuario selecciona la opción 3 en HH1 (horas) Me gustaría mostrar única 3-0 (donde 0 es de 24 horas) seleccione opciones en HH2. No quiero ver 1-2.

Básicamente, HH2 depende del valor seleccionado en HH1 — ¿es esto posible en JavaScript? ¿Podría mostrarme cómo, si es posible?

Fuente

2011-05-06 Nil Pun

¿cuál es la dependencia 'HH1> HH2'? –

depdependencia lamentable es HH2 Opciones> = valor SELECCIONADO en HH1. –

typo: el segundo nombre de 'seleccionar' es probablemente 'drop2'? –

var drop2 = $("select[name=drop2] option"); // the collection of initial options 
$("select[name=drop1]").change(function(){ 
    var drop1selected = parseInt(this.value); //get drop1 's selected value 
    $("select[name=drop2]") 
        .html(drop2) //reset dropdown list 
        .find('option').filter(function(){ 
         return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value 
         }).remove(); // remove 
});

http://jsfiddle.net/HTEkw/

Fuente

2011-05-06 11:18:26

@theSuperTramp, gracias. Casi, obtengo NAN para esta línea: var drop1selected = parseInt ($ (this) .find (": selected")); alerta (drop1selected); –

cambié el código ... uso 'this.value' en su lugar. –

gracias @theSuperTramp, ¡eres genio! –

La respuesta corta es Sí, es posible en JavaScript/Jquery.

Se podía hacerlo de esta manera que definen sus dependencias en un nuevo HTML5 Data- * atribuir :-)

HTML así:

HH1: 
<select name="drop1"> 
    <option value="0" data-shown="0,2">00</option> 
    <option value="2" data-shown="2,3">02</option> 
    <option value="3" data-shown="3,23">03</option> 
    <option value="23" data-shown="23,0">23</option> 
</select> 

HH2: 
<select name="drop2"> 
    <option value="0">00</option> 
    <option value="2">02</option> 
    <option value="3">03</option> 
    <option value="23">23</option> 
</select>

y Javascript (jQuery) así:

$('select[name="drop1"]').change(function() { 
var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(','); 
$('select[name="drop2"] option').each(function(){ 
    $(this).toggle(false); 
    for(var i = 0; i <= ar.length; i++){ 
     if($(this).attr('value') == ar[i]){ 
     $(this).toggle(true); 
     } 
    } 
});}).trigger('change');

Eso debería hacer lo que quiera que se haga en sus menús desplegables.

Con la condición que puso en el comentario es un poco más fácil:

$('select[name="drop1"]').change(function() { 
    var number = parseInt($('option:selected', this).attr('value')); 
    $('select[name="drop2"] option').each(function(){ 
      $(this).toggle(parseInt($(this).attr('value')) >= number); 
     }); 
}).trigger('change');

Fuente

2011-05-06 10:59:58 Guidhouse

Gracias @Guidhouse, la dependencia es HH2 Opciones> = valor SELECCIONADO en HH1 p. si se selecciona 2, solo se muestran 2 o más. –

Gracias @Guidhouse. Gran respuesta también. –

/Esto es código JavaScript/

function fndroplist(listindex) { 
     $("#ddlCity").options.length(""); 
     switch (listindex) { 
      case "Karnataka": 
       $("#ddlCity").options[0] = new Option("--select--", ""); 
       $("#ddlCity").options[1] = new Option("Dharawad", "Dharawad"); 
       $("#ddlCity").options[2] = new Option("Haveri", "Haveri"); 
       $("#ddlCity").options[3] = new Option("Belgum", "Belgum"); 
       $("#ddlCity").options[4] = new Option("Bijapur", "Bijapur"); 
       break; 

      case "Tamilnadu": 
       $("#ddlCity").options[0] = new Option("--select--", ""); 
       $("#ddlCity").options[1] = new Option("Chennai", "Chennai"); 
       $("#ddlCity").options[2] = new Option("Vijayada", "Vijayada"); 
       break; 
     } 
    } 
    </script> 



<body> 
     <div> 
      <p> 
       <label id="lblCt"> 
        City:</label> 
       <select id="ddlCity" style="width: 142px;"> 
        <option>--Select--</option> 
       </select> 
       <span class="red">*</span> 
       <label id="lblCity" style="color:Red; font-size:small;"> 
       </label> 
      </p> 
     </div> 
     <div> 
      <p> 
       <label> 
        Country:</label> 
       <input type="text" id="txtCountry" /> 
       <label id="lblCountry" style="color:Red; font-size:small;"> 
       </label> 
      </p> 
     </div> 
</body>

Fuente

2014-12-04 04:16:08 chetan

Cajas desplegables dependientes de Jquery: cómo

Respuesta

http://jsfiddle.net/HTEkw/

Cuestiones relacionadas