jQuery mostrar/ocultar opciones de un menú desplegable de selección, cuando se selecciona la opción en otro menú desplegable de selección

Question

Necesito mostrar/ocultar opciones en un menú desplegable de selección dependiente de otras opciones desplegables de selección.

El siguiente código muestra lo que estoy tratando de lograr.

Si la opción de menú 'column_select' está configurada en '1 columna', el menú de selección 'layout_select' debe mostrar solo la opción 'ninguno'.

Si la opción de menú 'column_select' está establecida en '2 column', el menú de selección 'layout_select' debe mostrar solo las opciones 'layout 1' y 'layout 2'.

Si la opción de menú 'column_select' está establecida en '3 column', el menú de selección 'layout_select' debe mostrar solo las opciones 'layout 3', 'layout 4' y 'layout 5'.

<select name="column_select" id="column_select"> 
    <option value="col1">1 column</option> 
    <option value="col2">2 column</option> 
    <option value="col3">3 column</option> 
</select> 

<select name="layout_select" id="layout_select"> 
    <!--Below shows when '1 column' is selected is hidden otherwise--> 
    <option value="col1">none</option> 

    <!--Below shows when '2 column' is selected is hidden otherwise--> 
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option> 

    <!--Below shows when '3 column' is selected is hidden otherwise--> 
    <option value="col3_mss">layout 3</option> 
    <option value="col3_ssm">layout 4</option> 
    <option value="col3_sms">layout 5</option> 
</select> 

Hasta ahora todo lo que he probado ha fallado abysmally .... Soy nuevo en jQuery. Si alguien pudiera ayudar, sería muy apreciado. ¡Gracias!

Answer 1

Try -

$("#column_select").change(function() { 
    $("#layout_select").children('option').hide(); 
    $("#layout_select").children("option[value^=" + $(this).val() + "]").show() 
}) 

Si se va a utilizar esta solución que había necesidad de ocultar todos los elementos, aparte de la que tiene el valor 'No' en el documento.listos función -

$(document).ready(function() { 
    $("#layout_select").children('option:gt(0)').hide(); 
    $("#column_select").change(function() { 
     $("#layout_select").children('option').hide(); 
     $("#layout_select").children("option[value^=" + $(this).val() + "]").show() 
    }) 
}) 

Demo - http://jsfiddle.net/Mxkfr/2

EDITAR

que podría haber conseguido llevar un poco con esto, pero aquí es un ejemplo más de que utiliza una caché de las opciones seleccionadas lista original para asegurarse de que la lista 'layout_select' se restablece/borra por completo (incluida la opción 'ninguno') después de cambiar la lista 'column_select' -

$(document).ready(function() { 
    var optarray = $("#layout_select").children('option').map(function() { 
     return { 
      "value": this.value, 
      "option": "<option value='" + this.value + "'>" + this.text + "</option>" 
     } 
    }) 

    $("#column_select").change(function() { 
     $("#layout_select").children('option').remove(); 
     var addoptarr = []; 
     for (i = 0; i < optarray.length; i++) { 
      if (optarray[i].value.indexOf($(this).val()) > -1) { 
       addoptarr.push(optarray[i].option); 
      } 
     } 
     $("#layout_select").html(addoptarr.join('')) 
    }).change(); 
}) 

Demo - http://jsfiddle.net/N7Xpb/1/

Answer 2

// find the first select and bind a click handler 
$('#column_select').bind('click', function(){ 
    // retrieve the selected value 
    var value = $(this).val(), 
     // build a regular expression that does a head-match 
     expression = new RegExp('^' + value), 
     // find the second select 
     $select = $('#layout_select); 

    // hide all children (<option>s) of the second select, 
    // check each element's value agains the regular expression built from the first select's value 
    // show elements that match the expression 
    $select.children().hide().filter(function(){ 
     return !!$(this).val().match(expression); 
    }).show(); 
}); 

(esto está lejos de ser perfecto, pero debe llegar hasta allí ...)

Answer 3

¿Qué tal:

(Actualizado)

$("#column_select").change(function() { 
    $("#layout_select") 
     .find("option") 
     .show() 
     .not("option[value*='" + this.value + "']").hide(); 

    $("#layout_select").val(
     $("#layout_select").find("option:visible:first").val()); 

}).change(); 

(suponiendo que el tercer option debería tener un valor col3)

Ejemplo:http://jsfiddle.net/cL2tt/

Notas:

• utilizar el evento .change() para definir un controlador de eventos que se ejecuta cuando el valor de select#column_select cambios.
• .show() todo option s en el segundo select.
• .hide() todos option s en el segundo select cuya value no contiene el value de la opción seleccionada en select#column_select, utilizando el attribute contains selector.

Answer 4

Inicialmente realizábamos tanto desplegable tiene la misma opción, la opción seleccionada en firstdropdown se oculta en seconddropdown "valor" es atributo personalizado que es único..

$(".seconddropdown option").each(function() { 
    if(($(this).attr('value')==$(".firstdropdown option:selected").attr('value'))){ 
     $(this).hide(); 
     $(this).siblings().show(); 
    } 
}); 

Answer 5

A Litle tarde quizá pero sugeriría

$(document).ready(function() { 
    var layout_select_html = $('#layout_select').html(); //save original dropdown list 

    $("#column_select").change(function() { 
     var cur_column_val = $(this).val(); //save the selected value of the first dropdown 
     $('#layout_select').html(layout_select_html); //set original dropdown list back 
     $('#layout_select').children('option').each(function(){ //loop through options 
     if($(this).val().indexOf(cur_column_val)== -1){ //do your conditional and if it should not be in the dropdown list 
      $(this).remove(); //remove option from list 
     } 
    }); 
}); 

Answer 6

Y en 2016 ..... Puedo hacer esto (que funciona en todos los navegadores y no crea html "ilegal").

Para el menú desplegable seleccione que es para mostrar/ocultar diferentes valores agregar ese valor como un atributo de datos.

<select id="animal"> 
    <option value="1" selected="selected">Dog</option> 
    <option value="2">Cat</option> 
</select> 
<select id="name"> 
    <option value=""></option> 
    <option value="1" data-attribute="1">Rover</option> 
    <option value="2" selected="selected" data-attribute="1">Lassie</option> 
    <option value="3" data-attribute="1">Spot</option> 
    <option value="4" data-attribute="2">Tiger</option> 
    <option value="5" data-attribute="2">Fluffy</option> 
</select> 

Luego, en su jQuery añadir un evento de cambio de la primera lista desplegable de selección para filtrar el segundo desplegable.

$("#animal").change(function() { 
    filterSelectOptions($("#name"), "data-attribute", $(this).val()); 
}); 

Y la parte mágica es esta pequeña utilidad jQuery.

function filterSelectOptions(selectElement, attributeName, attributeValue) { 
if (selectElement.data("currentFilter") != attributeValue) { 
    selectElement.data("currentFilter", attributeValue); 
    var originalHTML = selectElement.data("originalHTML"); 
    if (originalHTML) 
     selectElement.html(originalHTML) 
    else { 
     var clone = selectElement.clone(); 
     clone.children("option[selected]").removeAttr("selected"); 
     selectElement.data("originalHTML", clone.html()); 
    } 
    if (attributeValue) { 
     selectElement.children("option:not([" + attributeName + "='" + attributeValue + "'],:not([" + attributeName + "]))").remove(); 
    } 
} 

}

Esta pequeña joya pistas el filtro actual, si es diferente para restablecer los originales seleccionados (todos los artículos) y luego se quita los elementos filtrados. Si el elemento del filtro está vacío, vemos todos los artículos.