Question

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

查询1
查询2
查询3
查询4
ToxKeywords
分子

，第二个有2个值：

ToxKeywords
分子

我希望当我们在第一个下拉列表中选择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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个

$("#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
          $("#textQuery2 option[value='%20AND%20ToxKeywords:']").remove(); 
          $("#textQuery2 option[value='%20AND%20Molecules.Main_name:']").remove(); //remove option from list
        }
     });
   });

它将删除这两个选项。 }）

Answer 3

    $("#textQuery").change(function () {
           var cur_column_val = $(this).val();

           if(cur_column_val=='ToxKeywords' || cur_column_val=='Molecule'){
              $('option[value=textQuery2]', $('#textQuery2')).remove();
              $('option[value=Molecule]', $('#textQuery2')).remove();
           }
    });

这样的工作怎么样？让我知道:)）

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

3 个答案: