Question

我已经就如何根据主要选择显示第二个下拉框进行了广泛的研究。 stackoverflow非常棒，并且它们似乎适用于每个案例的jsfiddle。不幸的是，当我将它们应用于我的代码时，它们无法正常运行。我给你一个我发现的例子和我的代码应用这段代码。请告诉我我做错了什么。非常感谢你。

stackoverflow problem fix

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>OutInMaine</title>
<style type="text/css">
html, body
{
    height:100%;
    width:100%;
    background-image:url('maps/maine3.gif');
    background-size:100% 100%;
    background-repeat:no-repeat;
    font-family:"Comic Sans MS", cursive, sans-serif;
}
footer 
{
    position:fixed;
    bottom:0;
    width:100%;
    height:120px; /* choose any height */
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#regions').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
});
</script>
<script type="text/javascript">

function transfer() {
var url = "http://"+window.opener.location.hostname+window.opener.location.pathname;
var queryString;
var x = document.getElementById('regions');
queryString = '?regions='+x.options[x.selectedIndex].text;
window.opener.location.replace(url+queryString);
window.close();
}
</script>
</head>
<body onLoad="moveTo(200,200); resizeTo(600,850);">
<footer>
<form id="form" method="post" action="">
<br/><p align="right">Region to display: 
<select name="regions" id="regions">
    <option value="Aroostock">Aroostock</option>
    <option value="DownEast/Acadia">DownEast/Acadia</option>
    <option value="Highlands">Highlands</option>
    <option value="Kennebec/Moose River">Kennebec/Moose River</option>
    <option value="Lakes/Mountains">Lakes/Mountains</option>
    <option value="Mid-coast">Mid-Coast</option>
    <option value="Southern">Southern</option>
    <option value="SpecificCity">Specific City</option>
    <option value="Maine" selected="selected">Maine</option>
</select>
<input type="submit" name="go" value="Go" onclick="transfer()"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<div class="container">
<div class="SpecificCity" id="SpecificCity" style="display:none">
<select name="cities" id="cities">
    <option value="calais">Calais</option>
    <option value="bangor">Bangor</option>
</select>
</div>
</div>
</form>
</footer>
</body>
</html>

Answer 1

正如我从你的代码中理解的那样，你试图根据第一个选择过滤第二个下拉选项，但你忘了给第二个下拉列表中的选项，这与第一个下拉列表的值相对应，这就是为什么你的{{1方法找不到任何东西

为选项添加类：

show

并修改一下你的代码：

 <option value="calais" class="Mid-coast">Calais</option>

DEMO

根据第一个下拉菜单选项显示第二个下拉菜单不工作

1 个答案: