一种或另一种方式，您已经获得了可能最简单的HTML标记来完成该工作：
<select size="1" id="Rank" title="" name="Rank"> <option value="">-Select Your Rank-</option> <option value="Airman">Airman</option> <option value="Airman First Class">Airman First Class</option> <option value="Senior Airman">Senior Airman</option> <option value="Staff Sergeant">Staff Sergeant</option> <option value="Senior Master Sergeant">Senior Master Sergeant</option></select>
然后
<element>每个可能性都有一个容器
<option>。
<div> // For Airman</div><div> // For Senior Airman</div>
…等等等等…
对于要
<option>选择哪个内容，我将使用相同的布局；我想要的唯一文本行，另一个选择框等。我将每个包裹在一个容器元素中，这样您就可以轻松地将所有元素作为一个目标。
<div > <div> Line of text for Airman </div> <div> Line of text for Senior Airman </div></div><div > <div> <select> <option>Airman Stuff</option> </select> </div> <div> <select> <option>Senior Airman Stuff</option> </select> </div></div>
现在为
<div>我们所拥有的每一个
<div>飞机分配一个标识符，因此，当选择“飞行员”时，我们知道哪些飞机是飞行员（所以我们知道要显示这些飞机！）
<div > <div > Line of text for Airman </div> <div > Line of text for Senior Airman </div></div><div > <div > <select> <option>Airman Stuff</option> </select> </div> <div > <select> <option>Senior Airman Stuff</option> </select> </div></div>
并将相同的标识符添加到
<options>的中
<select id="rank">：
<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>
现在我们有了这个标记，将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'); // Setup the initial states});您的评论更新
您尝试像您一样更改代码的尝试没有奏效的原因是，因为我们目前没有将事件处理程序绑定到第二级
<select>框；只给
<select id="rank">
您基本上需要重复我们对于第一级导航和第二级导航所做的所有操作。与其使用
#id选择器
<select>，不如使用
.class;
因为我们
<select>要定位的元素不止一个，并且
#id必须是唯一的：
$('.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'); // Setup the initial states我们还必须更改的名称
div.container，以阻止这些
<select>框隐藏彼此的元素。
