jQuery mostra / nasconde le opzioni da un menu a discesa di selezione, quando viene selezionata l’opzione su altro menu a discesa di selezione

Devo mostrare / hide le opzioni su un menu a discesa di selezione dipendente da altre opzioni di selezione a discesa.

Il codice seguente mostra cosa sto cercando di ottenere.

Se l’opzione di menu di selezione “column_select” è impostata su “1 column”, il menu di selezione “layout_select” deve visualizzare solo l’opzione “none”.

Se l’opzione di menu di selezione “column_select” è impostata su “2 column”, il menu di selezione “layout_select” deve visualizzare solo le opzioni “layout 1” e “layout 2”.

Se l’opzione di menu di selezione “column_select” è impostata su “3 column”, il menu di selezione “layout_select” deve visualizzare solo le opzioni “layout 3”, “layout 4” e “layout 5”.

 1 column 2 column 3 column    none  layout 1 layout 2  layout 3 layout 4 layout 5  

Finora tutto ciò che ho provato è fallito in modo abissale … Sono nuovo di jQuery. Se qualcuno potesse per favore aiutarlo sarebbe molto apprezzato. Grazie!

Provare –

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

Se avessi intenzione di utilizzare questa soluzione avresti bisogno di hide tutti gli elementi oltre a quello con il valore ‘none’ nella tua funzione document.ready –

 $(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

MODIFICARE

Potrei esserne un po ‘portato via con questo, ma ecco un altro esempio che utilizza una cache delle opzioni di elenco di selezione originale per garantire che l’elenco’ layout_select ‘sia completamente resettato / cancellato (inclusa l’opzione’ none ‘) dopo il’ elenco column_select ‘è cambiato –

 $(document).ready(function() { var optarray = $("#layout_select").children('option').map(function() { return { "value": this.value, "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/

Che ne dite di:

( Aggiornato )

 $("#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(); 

(supponendo che la terza option dovrebbe avere un valore col3 )

Esempio: http://jsfiddle.net/cL2tt/

Gli appunti:

  • Utilizzare l’evento .change() per definire un gestore eventi che viene eseguito quando cambia il valore di select#column_select .
  • .show() tutte le option s nella seconda select .
  • .hide() tutte le option s nella seconda select cui value non contiene il value dell’opzione select#column_select in select#column_select , utilizzando l’ attributo contiene selettore .

Un po ‘tardi forse, ma vorrei suggerire

 $(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 } }); }); 

Inizialmente entrambi i menu a discesa hanno la stessa opzione, l’opzione selezionata in firstdropdown è nascosta in secondo piano. “Value” è un attributo personalizzato che è unico.

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

E nel 2016 ….. lo faccio (che funziona in tutti i browser e non crea html “illegale”).

Per la selezione a discesa che mostra / nasconde valori diversi, aggiungi quel valore come attributo dati.

   

Quindi nel tuo jQuery aggiungi un evento di modifica al primo menu a discesa per filtrare il secondo menu a discesa.

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

E la parte magica è questa piccola utility 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(); } } } 

Questo piccolo gioiello traccia il filtro corrente, se diverso ripristina la selezione originale (tutti gli elementi) e quindi rimuove gli elementi filtrati. Se l’elemento del filtro è vuoto, vediamo tutti gli elementi.

 // 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 ( 

(questo è lontano dall’essere perfetto, ma dovrebbe portarti lì …)