javascript - 如何根据另一个元素隐藏下拉元素？

Question

我有 2 个下拉菜单。一个有 6 个值:

• 查询 1
• 查询 2
• 查询 3
• 查询 4
• 有毒关键字
• 分子

第二个有 2 个值:

• 有毒关键字
• 分子

我希望当我们在第一个下拉列表中选择 ToxKeywords 或 Molecule 时，第二个下拉列表应该为空。

下拉菜单:

    <select class="form-control space" name="textQuery" id="textQuery">
        <option selected disabled>Choose here</option>
        <option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
        <option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
        <option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
        <option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
        <option value="ToxKeywords:">ToxKeywords</option>
        <option value="Molecules.Main_name:">Molecule</option>
    </select>
    <label for="textQuery2">Choose one parameter</label>
    <select class="form-control space" name="textQuery2" id="textQuery2">
        <option selected disabled>Choose here</option>
        <option value="%20AND%20ToxKeywords:">ToxKeywords</option>
        <option value="%20AND%20Molecules.Main_name:">Molecule</option>
    </select>

我发现这个 jquery 代码只隐藏与所选相同的值:

$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list

$("#textQuery").change(function () {
    var cur_column_val = $(this).val(); //save the selected value of the first dropdown
    $('#textQuery2').html(layout_select_html); //set original dropdown list back
    $('#textQuery2').children('option').each(function () { //loop through options
        if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
            $(this).remove(); //remove option from list
        }
     });
   });
 })

当在第一个下拉列表中选择 ToxKeywords 或 Molecule 时，有人可以找到一种方法来隐藏第二个下拉列表中的两个值吗？

Answer 1

$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list

    $("#textQuery").change(function () {
      var cur_column_val = $(this).val(); //save the selected value of the first dropdown
      
       if($(this).val()==='ToxKeywords:' || $(this).val()==='Molecules.Main_name:') {
          return $('#textQuery2').empty();
       }
      
      $('#textQuery2').html(layout_select_html); //set original dropdown list back
      $('#textQuery2').children('option').each(function () { //loop through options
          if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
              $(this).remove(); //remove option from list
          }
       });
     });
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control space" name="textQuery" id="textQuery">
        <option selected disabled>Choose here</option>
        <option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
        <option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
        <option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
        <option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
        <option value="ToxKeywords:">ToxKeywords</option>
        <option value="Molecules.Main_name:">Molecule</option>
    </select>
    <label for="textQuery2">Choose one parameter</label>
    <select class="form-control space" name="textQuery2" id="textQuery2">
        <option selected disabled>Choose here</option>
        <option value="%20AND%20ToxKeywords:">ToxKeywords</option>
        <option value="%20AND%20Molecules.Main_name:">Molecule</option>
    </select>