Categoria filtro Seleziona Scorri verso il basso in base a un’altra opzione a discesa

Voglio filtrare l’elenco delle opzioni in base alla selezione di un altro menu a discesa.

Si prega di consultare il seguente codice jquery; sono sicuro che c’è un pochino che mi manca è per questo che non funziona.

if($('#selectionone').is(':selected')){ $('option').filter('.edibles'); } if($('selectiontwo').is(':selected')){ $('option').filter('.vegfats'); } 

Ecco il link jsfiddle

Ecco il mio approccio per aggiungere / rimuovere opzioni in base alle opzioni selezionate e questo funzionerà nella maggior parte dei browser.

Ho modificato l’html aggiungendo la class alle prime opzioni di selezione come

   

JS:

 $(document).ready(function () { var allOptions = $('#selectprod option') $('#selectcat').change(function () { $('#selectprod option').remove(); //remove all options var classN = $('#selectcat option:selected').prop('class'); //get the var opts = allOptions.filter('.' + classN); //selected option's classname $.each(opts, function (i, j) { $(j).appendTo('#selectprod'); //append those options back }); }); }); 

JSFiddle

Potresti farlo in questo modo:

 $(document).ready(function () { $('#selectcat').change(function () { $('#selectprod option').show(); if ($('option:selected', this).attr('id') == 'selectionone') { $('#selectprod option.edibles').hide(); } if ($('option:selected', this).attr('id') == 'selectiontwo') { $('#selectprod option.vegfats').hide(); } }); }); 

esempio jsFiddle

Poiché questo potrebbe non funzionare nelle versioni precedenti di IE, puoi sostituire $('#selectprod option').show(); con $('#selectprod option').prop('disabled',false); e $('#selectprod option.vegfats').hide(); con $('#selectprod option.vegfats').prop('disabled',true);

Questo è un approccio semplice al problema, che dovrebbe essere piuttosto solido:

  

css:

 .hiddenOptions > select { display: none; } .hiddenOptions > select.active { display: inline-block; } 

JS:

 $('.masterSelect').on('change', function() { $('.hiddenOptions select').removeClass("active"); $('.hiddenOptions select').eq($(this).val()).addClass("active"); showValue(); }); $('.hiddenOptions select').on('change', function() { showValue(); }); $('.masterSelect').trigger('change'); //set initial value on load function showValue() { console.log($('.hiddenOptions select.active').val()); } 

https://jsfiddle.net/g5h2k6t4/1/

Includere questi due collegamenti insieme al codice fornito da Praveen