根据前一个下拉选择显示第二个下拉列表

Show second dropdown based on previous dropdown selection

本文关键字：选择 显示 下拉列表 第二个 一个      更新时间：2023-09-26

我是html/javascript的新手，我正在开发并试图找出如何使用这个链接的代码。

我可以看到下面的链接提出的解决方案，但不确定如何应用在html页面的上下文中:http://jsfiddle.net/3UWk2/3/

我已经复制了HTML和JavaScript函数内容在一个HTML页面，但它基本上显示所有的行和选择框…知道这是怎么运作的吗?我应该有一个单独的html页面与html代码和JavaScript函数在一个不同的文件，并以某种方式调用2在一起吗?

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

你应该包含你的脚本和页面将像:

<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>
相关文章：