I have 4 dropdown list <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>
there is another 3 dropdown also there id is like encoder2,encoder3 and encoder4. I want to hide a the options if it is selected in any 4 of this list. I used this code by call class name but its not worked.
$('.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
can I implement this using class.? or I must go by using 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();
}
}
});