我有一个HTML网站,当在一个DropDownList中选择一个值时,根据您的选择填充第二个列表。刷新页面或从重定向页面返回时,第一个DropDownList仍然是您首先选择的值,但不会填充第二个DropDownList。修复
如果您愿意,可以在GiveToTheYToday.org上查看我所描述的问题。
</style>
<script type="text/javascript">
function populate(br,ca){
var br = document.getElementById(br);
var ca = document.getElementById(ca);
ca.innerHTML = "";
if(br.value == "ASO"){
var optionArray = ["|","/aso/barbara_lankford.html|Barbara Lankford",
"/aso/howard_holloman.html|Howard Holloman","/aso/tricia_burke.html|Tricia Burke"]
}
else if(br.value == "Bullitt County"){
var optionArray = ["|","home.html|"]
}
else if(br.value == "Chestnut Street"){
var optionArray = ["|","home.html|"]
}
else if(br.value == "Clark County"){
var optionArray = ["|", "/clark/colita_moore.html|Colita Moore",
"/clark/rachel_hollensead.html|Rachel Hollensead"]
}
else if(br.value == "Downtown"){
var optionArray = ["|","/downtown/debbie_eberenz.html|Debbire Eberenz",
"/downtown/gaylee_gillim.html|Gaylee Gillim"]
}
else if(br.value == "Floyd County"){
var optionArray = ["|","/floyd/robyn_beard.html|Robyn Beard",
"/floyd/shane_thomas.html|Shane Thomas"]
}
else if(br.value == "Northeast"){
var optionArray = ["|","/northeast/adam_johnson.html|Adam Johnson", "/northeast/amy_mcclain.html|Amy McClain",
"/northeast/ashley_hopkins.html|Ashley Hopkins", "/northeast/brandon_white.html|Brandon White",
"/northeast/dale_burnham.html|Dale Burnham",
"/northeast/dee_fairfield.html|Dee Fairfield", "/northeast/doug_roemer.html|Doug Roemer",
"/northeast/jack_danehy.html|Jack Danehy", "/northeast/jennifer_broadbridge.html|Jennifer Broadbridge",
"/northeast/jessica_tretter.html|Jessica Tretter", "/northeast/joey_skidmore.html|Joey Skidmore",
"/northeast/lindsey_brown.html|Lindsey Brown", "/northeast/lori_fitzgerald.html|Lori Fitzgerald",
"/northeast/mac_brown.html|Mac Brown",
"/northeast/megan_schulte.html|Megan Schulte", "/northeast/melanie_vittitow.html|Melanie Vittitow",
"/northeast/michael_ngong.html|Michael Ngong", "/northeast/morgan_white.html|Morgan White",
"/northeast/ralph_piercy.html|Ralph Piercy", "/northeast/ron_burse.html|Ron Burse",
"/northeast/roscelle_griffin.html|Roscelle Griffin","/northeast/rudy_havira.html|Rudy Havira",
"/northeast/semra_meredith.html|Semra Meredith", "/northeast/sheila_pierce.html|Sheila Pierce",
"/northeast/stephanie_morgan-white.html|Stephanie Morgan-White", "/northeast/terry_smith.html|Terry Smith",
"/northeast/valerie_chinn.html|Valerie Chinn"]
}
else if(br.value == "Norton Commons"){
var optionArray = ["|","/norton_commons/allyson_vitato.html|Allyson Vitato",
"/norton_commons/ashley_porter.html|Ashley Porter"]
}
else if(br.value == "Oldham County"){
var optionArray = ["|","/oldham/kristin_compton.html|Kristin Compton"]
}
else if(br.value == "School-Age Child Care"){
var optionArray = ["|","/sacc/brandon_yates.html|Brandon Yates"]
}
else if(br.value == "Southeast"){
var optionArray = ["|","/southeast/chuck_jackson.html|Chuck Jackson", "/southeast/crysten_minzenberger.html|Crysten Minzenberger",
"/southeast/john_odom.html|John Odom","/southeast/john_oliva.html|John Oliva",
"/southeast/kristina_kluesner.html|Kristina Kluesner","/southeast/lakesha_washington.html|LaKesha Washington",
"/southeast/steve_sexton.html|Steve Sexton"]
}
else if(br.value == "Southwest"){
var optionArray = ["|", "/southwest/ashtyn_begley.html|Ashtyn Begley",
"/southwest/deonna_tinsley.html|Deonna Tinsley",
"/southwest/joseph_tindle.html|Joseph Tindle",
"/southwest/jenifer_roberts.html|Jenifer Roberts"]
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
ca.options.add(newOption);
}
}
</script><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header><img alt="" height="239" src="http://givetotheytoday.org/campaign_files/2016_header.jpg" width="960" /></header>
<div class="sidebar1">
<nav>
<ul>
<li>
<div align="center"><img alt="" height="auto" src="http://givetotheytoday.org/campaign_files/general.png" width="300" /></div>
</li>
<li><a href="http://givetotheytoday.org"><img alt="" height="174" src="http://givetotheytoday.org/campaign_files/give_today.png" width="278" /></a></li>
<li>
<div align="center"><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/6q1zUyecvt4" style="border: 3px solid #EEE;" width="290"></iframe><!-- end .content --></div>
</li>
</ul>
<!-- end .sidebar1 --></nav>
</div>
<article class="content">
<section>
<p> </p>
<p>In 2016, <b>over 16,000 people experienced our local YMCA because of the generous support of our compassionate Louisville community.</b> With your support, we can make sure that everyone who needs the Y has the opportunity to learn, grow and thrive.</p>
<p>To navigate to a campaigner, select their appropriate YMCA branch and campaigner name below:</p>
<hr />
<div align="center">
<form>Select a Branch: <select id="Branch" name="Branch" onchange="populate(this.id,'Campaigner')"><option value=""></option><option value="ASO">ASO</option><option value="Bullitt County">Bullitt County</option><option value="Chestnut Street">Chestnut Street</option><option value="Clark County">Clark County</option><option value="Downtown">Downtown</option><option value="Floyd County">Floyd County</option><option value="Northeast">Northeast</option><option value="Norton Commons">Norton Commons</option><option value="Oldham County">Oldham County</option><option value="School-Age Child Care">School-Age Child Care</option><option value="Southeast">Southeast</option><option value="Southwest">Southwest</option> </select><br />
Select a Campaigner: <select id="Campaigner" name="Campaigner" onchange="window.location.href=this.value"></select></form>
答案 0 :(得分:0)
您的功能仅在加载脚本时运行。当您从浏览器返回时,脚本不会再次加载,因为它已经存在于您的html文件中。
一个简单的解决方法是&#34;听&#34; DOM事件并相应地执行该功能。类似的东西:
document.addEventListener("DOMContentLoaded", function() {
populate();
});
这样,每次加载DOM时都会执行你的函数。
有关DOM事件的更多信息:https://developer.mozilla.org/en-US/docs/Web/Events
旁注:为什么你的函数中有两个参数(从未使用过)?
<强>更新强>
我仔细查看了您的代码,结果发现您总是将您的功能称为“分支”。作为第一个参数和&#39; Campaigner&#39;作为第二。所以你可以像我之前说的那样调用你的函数,但你需要将这两个参数作为字符串传递:
populate('Branch', 'Campaigner');