title: Trying to create dynamic dropdown search fields
body: <p>I'm trying to insert two dropdown boxes in my website where the selected option in the first dropdown influences the options in the second dropdown box. I can't understand why it won't work as when I click 'Car' in option 1 it has no effect on the options in the second dropdown box rather than fetching the relevant data.</p>
  <pre class="lang-js prettyprint-override"><code>&lt; script type = &quot;text/javascript&quot; &gt;
    function populate(s1, s2) {
      var s1 = document.getElementById(s1);
      var s2 = document.getElementById(s2);
      s2.innerHTML = &quot; &quot;;
      if (s1.value = &quot;Car&quot;) {
        var optionArray = [&quot;|&quot;, &quot;honda|Honda&quot;, &quot;bmw|Bmw&quot;, &quot;fiat|Fiat&quot;];
      }
      for (var option in optionArray) {
        var pair = optionArray[option].split(&quot;|&quot;);
        var newOption = document.createElement(&quot;option&quot;);
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        S2.options.add(newOption);
      }
    } &lt;
    /script&gt;
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;form action=&quot;https://www.carlink.co.uk/products.php&quot;&gt;
    &lt;select name=&quot;slct 1&quot; id=&quot;slct 1&quot; onchange=&quot;populate('slct 1','slct 2')&quot;&gt;
      &lt;option disabled selected=&quot;Vehicle Type&quot;&gt;Vehicle Type&lt;/option&gt;
      &lt;option value=&quot;Car&quot;&gt;Car&lt;/option&gt;
      &lt;option value=&quot;Van&quot;&gt;Shotgun&lt;/option&gt;
      &lt;option value=&quot;Bike&quot;&gt;Air rifle&lt;/option&gt;
      &lt;option value=&quot;Train&quot;&gt;Air pistol&lt;/option&gt;
    &lt;/select&gt;
  
  
    &lt;select name=&quot;slct 2&quot; id=&quot;slct 2&quot;&gt;
      &lt;option disabled selected=&quot;make&quot;&gt;Make&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>