title: 2 dropdown lists connected to each-other (the 2nd one depends from the first)
body: <p>I am trying to solve an exercise with these demands : "Create a HTML page also using javascript who contains a dropdown list where u choose the State and another dropdown list is filled dynamically with cities belonging to that Country.
  I have seen other similar questions and applied the suggestions but it still doesnt seem to work (the 2nd dropdown list stays empty).</p>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
  
       &lt;script type = "text/javascript"&gt;
  
      function update()
  {
  var albania = ["Tirana","Durres","Vlore","Shkoder"];
  var kosovo = ["Prishtina","Mitrovica","Peje","Gjakove"];
  var germany = ["Berlin","Frankfurt","Hannover","Bonn"];
  
  var  countries = document.getElementById("1");
  var cities = document.getElementById("2");
  var selected = countries.options[countries.selectedIndex].value;
  
  if(selected=="1"){
  for(var i = 0; i &lt; albania.length; i++) {
      var opt1 = document.createElement('option');
      opt1.innerHTML = albania[i];
      opt1.value = albania[i];
      cities.appendChild(opt1);
  }
  }
  else if(selected=="2")
  {
  for(var j = 0; j &lt; kosovo.length; j++) {
      var opt2 = document.createElement('option');
      opt2.innerHTML = kosovo[j];
      opt2.value = kosovo[j];
      cities.appendChild(opt2);
  }
  }
  else if(selected=="3")
  {
  for(var k = 0; k &lt; germany.length; k++) {
      var opt3 = document.createElement('option');
      opt3.innerHTML = germany[k];
      opt3.value = germany[k];
      cities.appendChild(opt3);
  }
  }
   else
  var t =0;
   }
      &lt;/script&gt;
  
      &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;p&gt;&lt;select  id= "1" onchange="update()"&gt;
         &lt;option selected = "selected" &gt;Select Country&lt;/option&gt;
         &lt;option value="1"&gt;Albania&lt;/option&gt;
         &lt;option value="2"&gt;Kosovo&lt;/option&gt;
         &lt;option value="3"&gt;Germany&lt;/option&gt;
         &lt;/select&gt;
         &lt;/p&gt;
  
      &lt;p&gt;&lt;select  id="2"&gt;
         &lt;option selected = "selected" &gt;&lt;/option&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;`"
  </code></pre>