不管怎样，您已经得到了可能是用于这项工作的最简单的 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 class="container">
<div>
Line of text for Airman
</div>
<div>
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div>
<select>
<option>Airman Stuff</option>
</select>
</div>
<div>
<select>
<option>Senior Airman Stuff</option>
</select>
</div>
</div>
现在为每个<div>我们已经有了，所以当选择“飞行员”时，我们知道是哪个<div>是飞行员（所以我们知道要向他们展示！）
<div class="container">
<div class="airman">
Line of text for Airman
</div>
<div class="senior-airman">
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div class="airman">
<select>
<option>Airman Stuff</option>
</select>
</div>
<div class="senior-airman">
<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 来隐藏/显示是so easy!
$(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
});
完毕;结帐一个例子：http://jsfiddle.net/3UWk2/1/ http://jsfiddle.net/3UWk2/1/
您的评论的更新
您尝试像您一样更改代码的原因不起作用是因为我们当前没有绑定到第二级的事件处理程序<select>盒子；只为了<select id="rank">
您基本上需要重复我们刚刚为第一级导航和第二级导航所做的一切。而不是使用#id选择器<select>, use a .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>盒子隐藏彼此的元素。
在此处查看更新的示例：http://jsfiddle.net/3UWk2/3/ http://jsfiddle.net/3UWk2/3/
