Javascript 基于上一个下拉列表选择显示第二个下拉列表_Javascript_Jquery_Html

Javascript 基于上一个下拉列表选择显示第二个下拉列表

javascript jquery html

Javascript 基于上一个下拉列表选择显示第二个下拉列表,javascript,jquery,html,Javascript,Jquery,Html,我是html/javascript新手，我正在开发并试图找出如何使用来自的代码我可以在下面的链接中看到解决方案，但不确定如何在html页面的上下文中应用：我复制了HTML页面中的HTML和JavaScript函数内容，但它基本上显示了所有的行和选择框。。。你知道这是怎么回事吗？我是否应该在另一个文件中有一个单独的html页面，其中包含html代码和JavaScript函数，并以某种方式将2调用在一起 <select size="1" id="Rank" title="" name="

我是html/javascript新手，我正在开发并试图找出如何使用来自的代码

我可以在下面的链接中看到解决方案，但不确定如何在html页面的上下文中应用：

我复制了HTML页面中的HTML和JavaScript函数内容，但它基本上显示了所有的行和选择框。。。你知道这是怎么回事吗？我是否应该在另一个文件中有一个单独的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');
});


-选择你的等级-
飞行员
下士
-选择你的等级-
基本矿主-1级
基本矿主-2级
-选择你的等级-
欧姆伯矿工-1级
欧姆伯矿工-2级
基本矿机1的文本行
基本矿石矿工2的文本行
omber miner 1的文本行
omber miner 2的文本行
$（文档）.ready（函数（）{
$（'#Rank'）.bind（'change'，function（）{
var elements=$（'div.container'）.children（）.hide（）；//隐藏所有元素
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
}).触发（“变更”）；
$（'.second-level select'）.bind（'change'，function（）{
var elements=$（'div.second-level-container'）.children（）.hide（）；//隐藏所有元素
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
}).触发（“变更”）；
});

您应该将脚本包含到中，页面将如下所示：

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


$（文档）.ready（函数（）{
$（'#Rank'）.bind（'change'，function（）{
var elements=$（'div.container'）.children（）.hide（）；//隐藏所有元素
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
}).触发（“变更”）；
$（'.second-level select'）.bind（'change'，function（）{
var elements=$（'div.second-level-container'）.children（）.hide（）；//隐藏所有元素
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
}).触发（“变更”）；
});
-选择你的等级-
飞行员
下士
-选择你的等级-
基本矿主-1级
基本矿主-2级
-选择你的等级-
欧姆伯矿工-1级
欧姆伯矿工-2级
基本矿机1的文本行
基本矿石矿工2的文本行
omber miner 1的文本行
omber miner 2的文本行

你好。。。我已经尝试了上述方法，并将您的代码复制到html页面中，但似乎不起作用。。。我仍然看到所有的行和过滤都不起作用：（嗨…看起来下面的链接似乎起作用了）：@user3652574那是我mean@user3652574若你们的问题解决了，你们应该通过接受答案来结束问题