根據第一個下拉菜單選項顯示第二個下拉菜單選項不工作

我已經做了大量的研究，關於如何顯示基於主要選擇的第二個下拉框。 stackoverflow一直很棒，他們似乎在jsfiddle中爲每個案例工作。不幸的是，當我將它們應用於我的代碼時，它們不起作用。我給你一個我發現的例子和我的代碼應用這個代碼。請告訴我我做錯了什麼。謝謝sooooo了。根據第一個下拉菜單選項顯示第二個下拉菜單選項不工作

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>

來源

2014-01-09 user3125362

因爲我從你的代碼，瞭解你們的篩選，根據在第一次選擇第二個下拉選項，但你忘了給類從第二個下拉，與值對應的選項第一個，這就是爲什麼你show方法無法找到任何

添加類選項：

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

和修改一點點代碼：

$('#regions').bind('change', function() { 
    var elements = $('div.container').find("option").hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value.length && $('div.container').find('.' + value).length) { // if somethings' selected 
     $('div.container').show(); 
     $('div.container').find('.' + value).show(); // show the ones we want 
    }else{ 
     $('div.container').hide(); 
    } 
}).trigger('change');

DEMO

來源

2014-01-09 17:33:20

我給你建議的修改，並沒有在結果的任何變化。第二個下拉列表不顯示。我加倍檢查錯別字，沒有任何東西。我也看了你的DEMO，並且無法讓它工作。根據您的編碼，如果在主要中選擇中等海岸線，則應顯示第二個下拉菜單。那是對的嗎？我希望它只是「特定城市」，但我可以在功能發生後進行這些更改。 – user3125362

根據第一個下拉菜單選項顯示第二個下拉菜單選項不工作

回答

相關問題