Page Refresh не заново заполняет DropDownList из предыдущего выбора

Question

У меня есть веб-сайт 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> 

Answer 1

Ваша функция запускается только при загрузке сценария. Когда вы возвращаетесь из браузера, сценарий не загружается снова, так как он уже присутствует в вашем html-файле.

Простым решением является «прослушивание» событий DOM и выполнение функции соответственно. Что-то вроде:

document.addEventListener("DOMContentLoaded", function() { 
    populate(); 
}); 

Таким образом, ваша функция будет выполняться каждый раз при загрузке DOM.

Подробнее о DOM событий: https://developer.mozilla.org/en-US/docs/Web/Events

примечание стороны: почему у вас есть два аргумента в функции (не используется)?

UPDATE

Я присмотрелся на свой код живой, и оказалось, что вы всегда вызывать вашу функцию прохождения «Branch» в качестве первого параметра и «борцом» в качестве второго. Таким образом, вы можете назвать вашу функцию, как я уже говорил, но вы должны передать эти два параметра в виде строки:

populate('Branch', 'Campaigner');