How to filter select box options with jQuery?

Question

I have two select boxes in my form:

<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

How can I filter the options in the second select box based on the option chosen in the first select box?

So, for example, if a user choses the basic option from the first box, only the the two first options of the second box should be displayed.

How can this be done with jQuery?

Thanks for any help and Merry Christmas to all of you.

Answer 1

Firstly, emtyt inside of second select

<select id="subscription_interval">
</select>

Then write this jquery codes:

 $("#subscription_plan").change(function(){

   var txt_select;

  if($(this).val()=="basic"){
      txt_select='<option value="basic_monthly">Monthly</option>';
      txt_select+=   '<option value="basic_yearly">Yearly</option>';
   }

   if($(this).val()=="premium"){
      txt_select='<option value="premium_monthly">Monthly</option>';
      txt_select+=   '<option value="premium_yearly">Yearly</option>';
   }

   $("#subscription_interval").html(txt_select);

 });

See snippet:

$("#subscription_plan").change(function() {

  var txt_select;

  if ($(this).val() == "basic") {
    txt_select = '<option value="basic_monthly">Monthly</option>';
    txt_select += '<option value="basic_yearly">Yearly</option>';
  }

  if ($(this).val() == "premium") {
    txt_select = '<option value="premium_monthly">Monthly</option>';
    txt_select += '<option value="premium_yearly">Yearly</option>';
  }

  $("#subscription_interval").html(txt_select);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option>
</select>

<select id="subscription_interval">

</select>

Answer 2

You can use theh .filter(callback) method. You would also need .change() to be triggered when the page loads so that the default value can be filtered against.

$(function() {
    $('#subscription_plan').on('change', function() {
        var val = this.value;
        $('#subscription_interval option').hide().filter(function() {
            return this.value.indexOf( val + '_' ) === 0;
        })
        .show();
    })
    .change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

UPDATE

You may want to initially capture the options in the second select and perform operations based on that:

$(function() {
    var interval = $('#subscription_interval option').clone();
    $('#subscription_plan').on('change', function() {
        var val = this.value;
        $('#subscription_interval').html( 
            interval.filter(function() { 
              return this.value.indexOf( val + '_' ) === 0; 
            })
        );
    })
    .change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

Answer 3

$("#subscription_plan").change(function(){

if($("#subscription_plan").val()=="basic")
  {
    $("#subscription_interval option").not("[value^='basic']").hide();
  }
else
  $("#subscription_interval option").not("[value^='basic']").show();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="select">Select this</option>
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

Answer 4

you can use this starts with Selector [name^="value"] to filter the options in second selector of the value from the first one

$("#subscription_plan").change(function(){
val = $(this).val();
$("#subscription_interval option").show(); 
if(val!="")
$("#subscription_interval option").not("[value^='"+val+"']").hide();

})

Working Demo:

$("#subscription_plan").change(function(){
val = $(this).val();
$("#subscription_interval option").show(); 
if(val!="")
 $("#subscription_interval option").not("[value^='"+val+"']").hide();

  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="">select</option>
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>