如何使用 jQuery 或 Javascript 从其他下拉列表中显示/隐藏相同的选项

Posted 2023-05-08

【中文标题】如何使用 jQuery 或 Javascript 从其他下拉列表中显示/隐藏相同的选项

【英文标题】：How to show / hide same option from other dropdown using jQuery or Javascript

【发布时间】：2021-12-29 22:22:36

【问题描述】：

我有 4 个下拉列表 <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> 还有另外 3 个下拉菜单，其中 id 就像编码器 2、编码器 3 和编码器 4。如果在此列表的任何 4 个中选择了选项，我想隐藏它。我通过调用类名使用了此代码，但它不起作用。

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

我可以使用类来实现它吗？或者我必须使用 id..？

【问题讨论】：

请编辑问题，使用工具栏上的<> 图标创建一个可运行的示例。将javascript和html添加到界面中，并从左侧选择一个jquery版本。即使您使用的版本可能高于所提供的版本，也请使用提供的最新参考。

【参考方案1】：

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

demo