I'm trying to create a dynamic menu on a HTML web page using JavaScript, but keep having trouble
<p>Okay so here is my HTML code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Menus&lt;/title&gt;
&lt;script type="text/javascript" src="Cities.js"&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;select id="Countries" name="countries" onchange="populate('Countries','Cities')"&gt;
    &lt;option value=""&gt;Country&lt;/option&gt;
    &lt;option value="Ireland"&gt;Ireland&lt;/option&gt;
    &lt;option value="Romania"&gt;Romania&lt;/option&gt;
    &lt;option value="England"&gt;England&lt;/option&gt;
    &lt;option value="Spain"&gt;Spain&lt;/option&gt;
    &lt;option value="Germany"&gt;Germany&lt;/option&gt;
&lt;/select&gt;

&lt;select id="Cities" name="cities"&gt;
    &lt;option value=""&gt;Cities&lt;/option&gt;
&lt;/select&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Okay, so all seems good here so far and here is my JavaScript code</p>

<pre><code>//Populates Countries and Cities select form elements

function populate(s1,s2)

{

var s1 = document.getElementById(s1);//s1==Countries

var s2 = document.getElementById(s2);//s2==Cities

s2.innerHTML="";

/**
 * if s1==Ireland print Dublin
 */
if(s1.value=="Ireland"){
    var optionArray = ["|", "dublin|Dublin"];
}
/**
 * If s1==Romania print Bucharest
 */
else if (s1.value=="Romania"){
        var optionArray=["|", "bucharest|Bucharest"];
    }

/**
 * if s1==England print Liverpool
 */
else if (s1.value=="England"){
        var optionArray=["|", "liverpool"|"Liverpool"];
    }

/**
 * if s1==Spain print Madrid
 */
else if (s1.value=="Spain") {
        var optionArray=["|", "madrid"|"Madrid"];
}

/**
 * if s1==Germany print Munich
 */
else if (s1.value=="Germany"){
    var optionArray=["|","munich"|"Munich"];
}


for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML=pair[1];
    s2.options.add(newOption);
}

}
</code></pre>

<p>As you can see what I'm trying to do is create if and if else statements so that if a certain select element from the html file is selected that it will print out a city from that country.</p>

<p>Now the weird part is that it works perfectly for Ireland and Romania and when they are selected I have the option to select Dublin or Bucharest from the other drop down menu, but it does not work for any of the other 3 countries? </p>

<p>Now seeing as it works for the first two select elements this makes me think that there is a problem either in my for loop or my HTML code but I'm not entirely sure. It might even just be a small problem staring me in the face that I just can't see.</p>

<p>Any help would be greatly appreciated, thank you.</p>