javascript - 通过在 JavaScript 中选择的值隐藏任一选项？

Question

我有一个表单，其中包含两个相同的选择列表，如下所示:

<select id="system" name="system[1][1]">
  Option 1
  Option 2
  Option 3
</select>

<select id="system" name="system[1][2]">
  Option 1
  Option 2
  Option 3
</select>

我希望用户选择其中一个选项option2。如果用户在第一次选择中选择选项2，则在第二次选择中隐藏选项2，反之亦然。

示例:

var select1 = document.querySelector('[name="system[1][1]"]');
var select2 = document.querySelector('[name="system[1][2]"]');

if (select1.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').hide();
  $('select[name="system[1][1]"] option[value="2"]').show();
} else if (select2.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').show();
  $('select[name="system[1][1]"] option[value="2"]').hide();
}

我认为这有点困惑。我可以用Javascript 或Jquery 实现这一点吗？

谢谢

Answer 1

尝试以下代码:

<select id="system" name="system[1][1]">
    <option value="optioin-1">Option 1</option>
    <option value="option-2">Option 2</option>
</select>

<select id="system" name="system[1][2]">
    <option value="optioin-1">Option 1</option>
    <option value="option-2">Option 2</option>
</select>

jQuery:

jQuery('select').change(function(e){
    var value = $(this).val();
    var selectboxId = $(this).attr('name');
    jQuery('select option').show();
    if(selectboxId == 'system[1][1]') {
        jQuery('select[name="system[1][2]"]').find('option[value="'+value+'"]').hide();
    } else if(selectboxId == 'system[1][2]') {
        jQuery('select[name="system[1][1]"]').find('option[value="'+value+'"]').hide();
    }
});