Tengo 4 listas desplegables <td> <select class="encoderSelect" id="encoder1"><option value="None">-- Select User Command --</option><option value="1920*1080">1920*1080</option> <option value="320*240 to 1280* 720">320*240 to 1280*720</option> <option value="720*480">720*480</option> <option value="320*240 to 1920*1080">320*240 to 1920*1080</option> </select></td> hay otros 3 menús desplegables, también hay una identificación como codificador2, codificador3 y codificador4. Quiero ocultar las opciones si está seleccionado en cualquiera de los 4 de esta lista. Usé este código por nombre de clase de llamada pero no funcionó.
$('.encoderSelect').change(function(){ var optionval = $('.encoderSelect').val(); console.log(optionval); $(".encoderSelect option[value='"+optionval+"']").hide(); }); $('.encoderSelect').on("change", function(){ $('.encoderSelect:selected', this).hide().siblings().show(); }).trigger('change'); // this code also tried but not worked¿Puedo implementar esto usando la clase? o debo ir usando id..?
$('#encoder1').on("change", function(){ var selected = $('#encoder1').val(); for (var i = 0; i<$('#encoder1').children().length; i++) { var element = $('#encoder1 option:eq('+i+')'); if ($(element).text() === selected) { $(element).hide(); } else { $(element).show(); } } });