页面刷新不会从先前的选择中重新填充DropDownList

时间:2017-02-21 15:21:50

标签: javascript jquery html drop-down-menu

我有一个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>&nbsp;</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>

1 个答案:

答案 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');