jquery 如何隐藏依赖于另一个的下拉列表元素？

ss2ws0br 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(116)

我有两个下拉菜单。一个包含6个值：

查询1
问题二
问题3
问题4
毒素关键词
分子

第二个有两个值：

毒素关键词
分子

我希望当我们在第一个下拉列表中选择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时，有人能找到一种方法来隐藏第二个下拉列表中的两个值吗？

jquery

来源：https://stackoverflow.com/questions/45036825/how-to-hide-dropdown-element-depending-to-another-one

3条答案

按热度按时间

dxpyg8gm1#

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

个字符

赞(0）回复(0）举报 2023-08-04

gudnpqoy2#

试试这个

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

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

赞(0）回复(0）举报 2023-08-04

qco9c6ql3#

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

字符串
不是这样的吗让我知道：）

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何隐藏依赖于另一个的下拉列表元素？

3条答案

相关问题

热门标签

最新问答