CODEWITHSUNDEEP
javascriptjqueryhtmlforms
wordpressdev_meg
wordpressdev_meg

Reputation: 143

Hide select options based on previous selections

Is it possible to hide options in a select/dropdown with jQuery based on the user's selection from a previous dropdown e.g:

If user is 8 (Age Select/Dropdown), and chooses subject English (Subject Select/Dropdown) then hide Location 2 from (Locations dropdown)?

<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>

<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>

<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>

Thank you!

Upvotes: 1

Views: 1231

Answers (3)

Negi Rox
Negi Rox

Reputation: 3922

you just need to add change function to your drop-down and according to your requirement you need to add your logic. see below example.

$(document).ready(function(){
   $("#age").change(function(){
 hideOption();
   
   })
   $("#subject").change(function(){
   hideOption();
   })
})
function hideOption(){
  var age=$("#age").val();
   var subject=$("#subject").val();
   if(age==8 && subject=="Maths"){
    $("#location [value='Location Two']").hide();
   }
   else{
    $("#location [value='Location Two']").show();
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>

<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>

<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>

Upvotes: 1

Devsi Odedra
Devsi Odedra

Reputation: 5322

You can do something like below

$(document).on('change', '.age', function(e){
  
  var val = $(this).val();
  var subject = $('.subject').find(":selected").val();
  
  if(val == 8 && subject == 'English' ){
      $('.location option[value="Two"]').hide();
  } else {
      $('.location option[value="Two"]').show();
  }
 
})
$(document).on('change', '.subject', function(e){
  
   var age = $('.age').find(":selected").val();
  var val = $(this).val();
  
  if(age == 8 && val == 'English' ){
      $('.location option[value="Two"]').hide();
  } else {
      $('.location option[value="Two"]').show();
  }
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" class="age">
  <option >select</8>
  <option value="8">8</8>
  <option value="9">9</8>
  <option value="10">10</8>
  <option value="11">11</8>
</select>

<select name="subject" class="subject">
  <option value="English">English</8>
  <option value="Maths">Maths</8>
  <option value="Science">Science</8>
</select>

<select name="location" class="location">
  <option value="One">Location One</8>
  <option value="Two">Location Two</8>
  <option value="Three">Location Three</8>
</select>

Upvotes: 1

Miika
Miika

Reputation: 412

With jQuery you can use .hide() and .show() to toggle element visibility. First however, you can check if the value of a select (for example age) was changed. Based on the logic you want to have, you can for example check what the value of the change was and do something if it matches a condition.

For example:

$( "#age-select" ).change(function() {
  var value = $(this).val();
  if(value == 8) {
    $("#location-two").hide();
  } else {
    $("#location-two").show();
  }
});

However, notice that I added an id for the "Location Two" option ("location-two") and for the age select element. Also, to make this work properly, you have to fix the values so that they're not all 8 and fix the closing tags of the elements (not ).

Upvotes: 0

Related Questions