自动选择首次下拉选项

Question

根据以下代码：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>

跟着：

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

我看着3比3下拉，总共有9个值。

Answer 1

检查这是否可以帮助你

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;