title: Dynamic list with html and javascript
body: <p>Im new to scripting and currently I'm doing some stuff with html, javascript and php. Im having issue with html where I want that when a user chooses a particular item from the first list the second list will be populated accordingly. however they are being empty</p>
  
  <p>Done some research on the internet and other forums however issue still not solved even though I've changed some code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function populate(s1,s2) {
          var s1 = document.getElementByID(slct1);
          var s2 = document.getElementByID(slct2);
          s2.innerHTML = "";
  
          if(s1.value == "Email"){
          var optionArray = ["Cannot Login|Cannot Login", "Cannot Sent Email|Cannot Sent Email"];
  
          }
              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);
              }
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;select id="slct1" name="slct1" onchange="populate('slct1','slct2')"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="Email"&gt;Email&lt;/option&gt;
      &lt;option value="Print"&gt;Print&lt;/option&gt;
      &lt;option value="Internet"&gt;Internet&lt;/option&gt;
  &lt;/select&gt;
  &lt;hr /&gt;
  Select your issue:
  &lt;select id="slct2" name="slct2"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>if the user chooses email the options should be displayed</p>