[英]Show second dropdown based on previous dropdown selection
I am new to html/javascript and I am developing and trying to figure out how to use the code from this link . 我是html / javascript的新手,并且正在开发并尝试找出如何使用此链接中的代码。
I can see the solution presented in below link, but not sure how to apply in the context of the html page: http://jsfiddle.net/3UWk2/3/ 我可以在下面的链接中看到解决方案,但是不确定如何在html页面的上下文中应用: http : //jsfiddle.net/3UWk2/3/
I have copied the HTML and JavaScript function content within a HTML page, but it basically displays all the lines and select boxes... any idea how is this intended to work? 我已经在HTML页面中复制了HTML和JavaScript函数的内容,但是它基本上显示了所有行并选择了框...知道这是如何工作的吗? Should I have a separate html page with the html code and the JavaScript function in a different file and somehow call the 2 together?
我是否应该在不同的文件中使用单独的html页面以及html代码和JavaScript函数,并且以某种方式将两者一起调用?
<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');
});
you should include you script into and page will be like: 您应该将脚本包括在内,页面将类似于:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.