Auto Select First Dropdown Option

Question

Based on this codes: http://jsfiddle.net/3UWk2/3/

<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>

<div class="container">
<div class="airman">
    <select class="second-level-select">
        <option value="">-Select Your Rank-</option>
        <option value="basic-ore-1">Basic Ore Miner - Level 1</option>
        <option value="basic-ore-2">Basic Ore Miner - Level 2</option>
    </select>
</div>
<div class="senior-airman">
    <select class="second-level-select">
        <option value="">-Select Your Rank-</option>
        <option value="omber-miner-1">Omber Miner - Level 1</option>
        <option value="omber-miner-2">Omber Miner - Level 2</option>
    </select>
</div>
</div>

<div class="second-level-container">
<div class="basic-ore-1">
    Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
    Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
    Line of text for omber miner 1
</div>
<div class="omber-miner-2">
    Line of text for omber miner 2
</div>    
</div>

Followed By:

$(document).ready(function() {
$('#Rank').bind('change', function() {
    var elements = $('div.container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

$('.second-level-select').bind('change', function() {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');
});

How do I auto select the first option of both dropdown and display the final value OnLoad?

I'm looking at 3 by 3 drop down, with 9 values in total.

Answer 1

Check if this might help you out

 $(document).ready(function() { //bind onchange for the rank dd $("#Rank").on('change', function() { let selectedValue = $(this).val(); $(".container>div").hide(); if (selectedValue.length) { $("." + selectedValue).show(); //select.val($(select + " option:eq(1)").val()); } }) //bind onchange for the airman dd $("#second-level-select-airman").on('change', function() { let selectedValue = $(this).val(); $(".second-level-container").children().hide(); if (selectedValue.length) { $("." + selectedValue).show(); //select.val($(select + " option:eq(1)").val()); } }) //bind onchange for the senior airman $("#second-level-select-senior-airman").on('change', function() { let selectedValue = $(this).val(); $(".second-level-container").children().hide(); if (selectedValue.length) { $("." + selectedValue).show(); //select.val($(select + " option:eq(1)").val()); } }); //select first value of first dropdown $("#Rank").val($("#Rank option:eq(1)").val()).trigger('change'); //select the first option from the 2nd menu depending on the valur of the first dd $("." + $("#Rank").val()).find("select").val( $("." + $("#Rank").val()).find("select option:eq(1)").val() ).trigger('change'); // $("#Rank").val($("#Rank option:eq(1)").val()); // $("." + $("#Rank").val()).find("select").val( // $("." + $("#Rank").val()).find("select option:eq(1)").val() // ); }); 

 .airman, .senior-airman, .second-level-container>div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="Rank" name="Rank"> <option value="">-Select Your Rank-</option> <option value="airman">Airman</option> <option value="senior-airman">Senior Airman</option> </select> <div class="container"> <div class="airman"> <select class="second-level-select" id="second-level-select-airman"> <option value="">-Select Your Rank-</option> <option value="basic-ore-1">Basic Ore Miner - Level 1</option> <option value="basic-ore-2">Basic Ore Miner - Level 2</option> </select> </div> <div class="senior-airman"> <select class="second-level-select" id="second-level-select-senior-airman"> <option value="">-Select Your Rank-</option> <option value="omber-miner-1">Omber Miner - Level 1</option> <option value="omber-miner-2">Omber Miner - Level 2</option> </select> </div> </div> <div class="second-level-container"> <div class="basic-ore-1"> Line of text for basic ore miner 1 </div> <div class="basic-ore-2"> Line of text for basic ore miner 2 </div> <div class="omber-miner-1"> Line of text for omber miner 1 </div> <div class="omber-miner-2"> Line of text for omber miner 2 </div> </div>