Javascript if an option is selected than a new sets of option appear

Question

In a nutshell, I would like that when the user selects an option, a set of options appear in relationship that option selected.

Below is what I have done thus far:

The HTML:

<form method="" action="">
        <input type="file" placeholder="Upload Project">
        <select id="selectProvider">
            <option disabled selected> Select Training Platform </option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2 </option>
            <option value="3"> Option 3 </option>
            <option value="4"> Option 4 </option>
            <option value="5"> Option 5 </option>

        </select>
    </form>

The JavaScript:

<script>

$(function(){

    if ($('#selectProvider').val(1)) {
      //that's where I stopped
    }

});

</script>

i.e. if option 1 is selected than the following would appear

<select>
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>

Update:

    <select data-role="1" style="display: none;">
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>


    <select data-role="2" style="display: none;">
    <option> Option 21 </option>
    <option> Option 22 </option>
    <option> Option 23 </option>
</select>

     <select data-role="3" style="display: none;">
    <option> Option 31 </option>
    <option> Option 32 </option>
    <option> Option 33 </option>
</select>


 <select data-role="4" style="display: none;">
    <option> Option 41 </option>
    <option> Option 42 </option>
    <option> Option 43 </option>
</select>

 <select data-role="5" style="display: none;">
    <option> Option 51 </option>
    <option> Option 52 </option>
    <option> Option 53 </option>
</select>


<script>

$(function(){

    $('#selectProvider').on('change', function(){
        if ($(this).val() == '1') {
            var sel = $('select[data-role=1]');
            sel.show();
        }
        else if ($(this).val() == '2') {
            var sel = $('select[data-role=2]');
            sel.show();
        }

        else if ($(this).val() == '3') {
            var sel = $('select[data-role=3]');
            sel.show();
        }

        else if ($(this).val() == '4') {
            var sel = $('select[data-role=4]');
            sel.show();
        }

            else if ($(this).val() == '5') {
            var sel = $('select[data-role=5]');
            sel.show();
        }

    });

});

</script>

I'm almost as confused as you are. Is there another select that's supposed to appear after the user selects `TeamTreeHouse`? — Mark C., Jun 04 '15 at 13:05
1) it should be `.val() == '1'` 2) what options should be loaded after an initial selection is made? — Rory McCrossan, Jun 04 '15 at 13:05
yeah another select with different option should appear. for example if you select option 1, then below another set of options. My question i guess is linking properly these different options — Jon220, Jun 04 '15 at 13:10
@Jon220 Check this Q/A: http://stackoverflow.com/questions/30232146/dynamically-populating-drop-down-list-from-selection-of-another-drop-down-value/30232604#30232604 — divy3993, Jun 04 '15 at 13:14
thanks though the above suggestion is achieve with pure javascript, i want to try and pull it off using jquery instead — Jon220, Jun 04 '15 at 13:18

Mark C. · Accepted Answer · 2015-06-04T16:54:04.870

I modified your HTML a little and changed the event handler, because an immediately invoked function didn't make sense.

HTML

<form method="" action="">
        <input type="file" placeholder="Upload Project">
        <select id="selectProvider">
            <option disabled selected> Select Training Platform </option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2 </option>
            <option value="3"> Option 3 </option>
            <option value="4"> Option 4 </option>
            <option value="5"> Option 5 </option>

        </select>
    </form>

    <select data-role="1" style="display: none;">
    <option> Option 11 </option>
    <option> Option 12 </option>
    <option> Option 13 </option>
</select>


    <select data-role="2" style="display: none;">
    <option> Option 21 </option>
    <option> Option 22 </option>
    <option> Option 23 </option>
</select>

     <select data-role="3" style="display: none;">
    <option> Option 31 </option>
    <option> Option 32 </option>
    <option> Option 33 </option>
</select>


 <select data-role="4" style="display: none;">
    <option> Option 41 </option>
    <option> Option 42 </option>
    <option> Option 43 </option>
</select>

Edit (for multiple selects)

For your new updated code, see this new Fiddle. We just want to store the role in a variable an analyze it in a switch case statement.

$('#selectProvider').on('change', function(){
    var role = $(this).val();
    switchRole(role);
});

function switchRole(role) {
      var sel = $('select[data-role= ' + role + '  ]');
      sel.show();
      hideSelects(role, sel)
};

hideSelects = function(role, selected) {
    var elements = $("select").filter(function() {
        return $(this).data("role") !== undefined;
    });
    var toHide = $(elements).not(selected);
    toHide.hide();
};

I also refactored hiding the other selects into it's own function.

thank you for your help. I have made an update under my initial post with multiple select. how would i apply switch case, I tried using the combination of if and else if but the problem with that is that you sometimes get multiple select options showing up — Jon220, Jun 04 '15 at 14:56
See the update @Jon220 .. I'm not sure if you want the hide the other selects or not. — Mark C., Jun 04 '15 at 15:07
thanks. yeah i would want to hide the other select so that only one select is shown at a time. thanks — Jon220, Jun 04 '15 at 15:11

score -1 · Answer 2 · answered Jun 04 '15 at 13:56

Hi you can Try Something Like This http://jsfiddle.net/viper_yash/hLg3nq5L/ var city_list=new Array(); city_list[0] = ""; city_list[1] = "b1|b2|b3"; city_list[2]="c1|c2|c3"; city_list[3]="a1|a2|a3"; function fill_city(state,city){ var e2=$("select[name='state'] option:selected").index(); var e3 = document.getElementById(city); e3.length = 0; e3.options[0] = new Option('Select City', ''); e3.selectedIndex = 0; var city_array = city_list[e2].split("|"); for (var i = 0; i < city_array.length; i++) { e3.options[e3.length]= new Option(city_array[i],city_array[i]); } }

Javascript if an option is selected than a new sets of option appear

2 Answers2

HTML

Edit (for multiple selects)