title: Trying to make dynamically populated linked select boxes to show specific images on a page
body: <p>I'm trying to create a form with dynamically populating select dropdowns, where when I select a car manufacturer, then the car model, I can click a go button (I know this can be done with a state change but I very specifically need a go button) an image of that specific car shows up on a frame on the same page, however I have got stuck at the go button section, can anyone help please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// object literal holding data for option elements
  var Select_List_Data = {
    choices: {
      // name of associated select box
  
      // names match option values in controlling select box
      
      0: {
        text: ["Select Model..."],
        value: ["Select Model...", "0", "1"]
      },
      carA: {
        text: ["Select Model", "model i", "model ii", "model iii"],
        value: ["Select Model", "model i", "model ii", "model iii"]
      },
      carB: {
        text: ["Select Model", "model iv", "model v", "model vi"],
        value: ["Select Model", "model iv", "model v", "model vi"]
      },
      carC: {
        text: ["Select Model", "model vii", "model viii", "model ix"],
        value: ["Select Model", "model vii", "model viii", "model ix"]
      },
    }
  };
  // removes all option elements in select box
  // removeGrp (optional) boolean to remove optgroups
  function removeAllOptions(sel, removeGrp) {
    var len, groups, par;
    if (removeGrp) {
      groups = sel.getElementsByTagName("optgroup");
      len = groups.length;
      for (var i = len; i; i--) {
        sel.removeChild(groups[i - 1]);
      }
    }
  
    len = sel.options.length;
    for (var i = len; i; i--) {
      par = sel.options[i - 1].parentNode;
      par.removeChild(sel.options[i - 1]);
    }
  }
  
  function appendDataToSelect(sel, obj) {
    var f = document.createDocumentFragment();
    var labels = [],
      group,
      opts;
  
    function addOptions(obj) {
      var f = document.createDocumentFragment();
      var o;
  
      for (var i = 0, len = obj.text.length; i &lt; len; i++) {
        o = document.createElement("option");
        o.appendChild(document.createTextNode(obj.text[i]));
  
        if (obj.value) {
          o.value = obj.value[i];
        }
  
        f.appendChild(o);
      }
      return f;
    }
  
    if (obj.text) {
      opts = addOptions(obj);
      f.appendChild(opts);
    } else {
      for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          labels.push(prop);
        }
      }
  
      for (var i = 0, len = labels.length; i &lt; len; i++) {
        group = document.createElement("optgroup");
        group.label = labels[i];
        f.appendChild(group);
        opts = addOptions(obj[labels[i]]);
        group.appendChild(opts);
      }
    }
    sel.appendChild(f);
  }
  // anonymous function assigned to onchange event of controlling select box
  document.forms["demoForm"].elements["category"].onchange = function(e) {
    // name of associated select box
    var relName = "choices";
  
    // reference to associated select box
    var relList = this.form.elements[relName];
  
    // get data from object literal based on selection in controlling select box (this.value)
    var obj = Select_List_Data[relName][this.value];
  
    // remove current option elements
    removeAllOptions(relList, true);
  
    // call function to add optgroup/option elements
    // pass reference to associated select box and data for new options
    appendDataToSelect(relList, obj);
  };
  
  // populate associated select box as page loads
  (function() {
    // immediate function to avoid globals
  
    var form = document.forms["demoForm"];
  
    // reference to controlling select box
    var sel = form.elements["category"];
    sel.selectedIndex = 0;
  
    // name of associated select box
    var relName = "choices";
    // reference to associated select box
    var rel = form.elements[relName];
  
    // get data for associated select box passing its name
    // and value of selected in controlling select box
    var data = Select_List_Data[relName][sel.value];
  
    // add options to associated select box
    appendDataToSelect(rel, data);
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" method="post" id="demoForm" class="demoForm"&gt;
  
          &lt;label class="wrapper" for="states"&gt;Target Manufacturer&lt;/label&gt;
      &lt;div class="button dropdown"&gt; 
          &lt;select name="category"&gt;
            &lt;option value="0" selected="selected"&gt;Select a Manufacturer...&lt;/option&gt;
  &lt;option value="carA"&gt;car a&lt;/option&gt;
  &lt;option value="carB"&gt;car b&lt;/option&gt;
  &lt;option value="carC"&gt;car c&lt;/option&gt;
          &lt;/select&gt;  &lt;/div&gt;
  &lt;div&gt;&lt;label class="wrapper" for="states"&gt;Model&lt;/label&gt;
         &lt;div class="button dropdown"&gt;  &lt;select name="choices" id="choices"&gt;
              &lt;!-- populated using JavaScript --&gt;
          &lt;/select&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>