自動選択最初のドロップダウンオプション

Question

：

$(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'); 
}); 

がどのように自動の両方のドロップダウンの最初のオプションを選択して、最終的な値のOnLoadを表示します：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> 

続きますか？

私は合計で9個の値で3を3つずつドロップダウンしています。

Answer 1

チェックこれはあなたを助ける可能性がある場合

$(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>