根據以前的下拉選擇顯示第二個下拉列表

我是html/javascript的新手，我正在開發並試圖弄清楚如何使用this link中的代碼。根據以前的下拉選擇顯示第二個下拉列表

我能看到的解決方案呈現在下面的鏈接，但不知道如何在HTML頁面的上下文應用： http://jsfiddle.net/3UWk2/3/

我抄一個HTML網頁中的HTML和JavaScript函數的內容，但它基本上顯示所有的行和選擇框...任何想法這是如何工作的？我是否應該在不同的文件中使用HTML代碼和JavaScript函數分別設置html頁面，並以某種方式將它們一起調用？

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

來源

2014-05-21 user3652574

你應該包括你的腳本到和頁面會像：

<html > 
<head > 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(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'); 
}); 

</script> 
</head> 

<body> 
    <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> 
</body> 
</html>

來源

2014-05-21 11:22:02 deadulya

嗨，你好，我已經試過以上並複製你的代碼放到一個HTML頁面，但似乎並沒有工作。 ..我仍然看到所有的行和過濾器不工作:( – user3652574

@ user3652574更改//ajax.googleapis.com到http://ajax.googleapis.com – deadulya

HI ...看起來像下面的鏈接似乎工作：「http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js」 – user3652574

根據以前的下拉選擇顯示第二個下拉列表

回答

相關問題