How to hide\show specific value of option based on another selected option by JQuery?

Question

I Have html select form like this:

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.

How to solve that condition by using jQuery?

Answer 1

You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.

Working Example:

$(document).ready(function(){

  var car = '<option value="car">car</option>';
  var bike = '<option value="bike">bike</option>';
  var house = '<option value="house">house</option>';
  var money = '<option value="money">money</option>';
  var plane = '<option value="plane">plane</option>';
  var wife = '<option value="wife">wife</option>';

    function options1() {
        $('#id_choices').append(car);
        $('#id_choices').append(bike);
    }

    function options2() {
        $('#id_choices').append(house);
        $('#id_choices').append(money);
    }

    function options3() {
        $('#id_choices').append(plane);
        $('#id_choices').append(wife);
    }

    function displayOptions() {

        $('#id_choices option').remove();

        switch ($('#id_num option:selected' ).text()) {
            case('1') : options1(); break;
            case('2') : options2(); break;
            case('3') : options3(); break;
            case('all') : options1(); options2(); options3(); break;
        }
    }

    $('#id_num').change(function(){displayOptions();});

    displayOptions();

});

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

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

---

For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:

var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');

function displayOptions() {

    var optionSet1 = ['car', 'bike'];
    var optionSet2 = ['house', 'money'];
    var optionSet3 = ['plane', 'wife'];
    var oldOptions = choices.getElementsByTagName('option');
    var selected = numbers.options[numbers.selectedIndex].text;

    while (oldOptions.length > 0) {
        choices.removeChild(oldOptions[0]);
    }

    switch (selected) {
        case('1') : var optionSet = optionSet1; break;
        case('2') : optionSet = optionSet2; break;
        case('3') : optionSet = optionSet3; break;
        case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
    }

    for (var i = 0; i < optionSet.length; i++) {
        var option = document.createElement('option');
        option.setAttribute('value',optionSet[i]);
        option.textContent = optionSet[i];
        choices.appendChild(option);
    }
}

numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

Answer 2

there may be a better way, however this does work.. you can also add hide/display classes to any other elements

        $(document).ready(function () { $('#id_num').on('change', change) });

        function change() {
            $('#id_choices > option').hide();
            $($(this).find(':selected').attr('clssval')).show();
        }

.sel{display:none;}
.num1{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
    <option value='1' clssval=".num1">1</option>
    <option value='2' clssval=".num2">2</option>
    <option value='3' clssval=".num3">3</option>
    <option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car' class="sel num1">car</option>
    <option value='bike' class="sel num1">bike</option>
    <option value='house' class="sel num2">house</option>
    <option value='money' class="sel num2">money</option>
    <option value='plane' class="sel num3">plane</option>
    <option value='wife' class="sel num3">wife</option>
</select>

Answer 3

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,

Please have a look on the code below:

$(function() {


    $('#id_num').on('change', function(e) {

        if ($(this).val() == 1) {

            var arr = ['car', 'bike'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else if ($(this).val() == 2) {

            var arr = ['house', 'money'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else if ($(this).val() == 3) {

            var arr = ['plane', 'wife'];
            $('#id_choices option').each(function(i) {
                if ($.inArray($(this).attr('value'), arr) == -1) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', 'inline-block');
                }
            });
        } else {

            $('#id_choices option').each(function(i) {
                $(this).css('display', 'inline-block');
            });

        }

    })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
    <option disabled selected>Select</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house' >house</option>
    <option value='money' >money</option>
    <option value='plane' >plane</option>
    <option value='wife' >wife</option>
</select>

Hope this helps!

Answer 4

Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out