How to hide dropdown element depending to another one?

Question

I've got 2 dropdowns. One with 6 values :

• Query 1
• Query 2
• Query 3
• Query 4
• ToxKeywords
• Molecule

and the second with 2 values :

• ToxKeywords
• Molecule

I want that when we select ToxKeywords or Molecule in the first dropdown, the second dropdown should be empty.

Dropdowns :

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

I find this jquery code that hide only the same value wich is selected :

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

Could someone find a way to hide both values of the second dropdown when ToxKeywords or Molecule is selected in the first one ?

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>

Answer 2

Try this

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

It will remove both options. })

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

doen't work like this? let me know :)