title: How to add values to <option> tag loaded from array
body: <p>I have a multi part form to load color options based on size selection however it will not add values to the option tag and I cant seem to find the solution. What I would like is. </p>
  
  <ol>
  <li><p>To add values to the option tags example:</p>
  
  <p>option value="X">Clear,option value="T">Smoke,option value="GS">Gunsmoke</p></li>
  <li><p>Output as html the selected options text so i can display to client their selections in a readable format before they submit the final step. </p></li>
  </ol>
  
  <p>Any help would be greatly appreciated. Thanks</p>
  
  <p>My Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Vest_10_08 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke");
  var Vest_10_10 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke");
  var Vest_10_12 = new Array("Select Color", "Clear", "Smoke", "Gunsmoke");
  var Vest_10_14 = new Array("Select Color", "Clear", "Smoke");
  var Vest_10_16 = new Array("Select Color", "Clear", "Smoke");
  
  $(document).ready(function () {
      //Populate Select Items
  
      $('#SelectSize').change(function () {
          populateSelect(), populatePart();;
      });
      $('#SelectHardware').change(function () {
          populatePart();
      });
      $('#SelectColor').change(function () {
          populatePart();
      });
  
      function populateSelect() {
          SelectSize = $('#SelectSize').val();
          $('#SelectColor').html('');
  
          eval(SelectSize).forEach(function (t) {
              $('#SelectColor').append('&lt;option&gt;' + t + '&lt;/option&gt;');
          });
  
      }
  
      function populatePart() {
          SelectSize = $('#SelectSize').val();
          SelectHardware = $('#SelectHardware').val();
          SelectColor = $('#SelectColor').val();
          document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor)
  
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select id="SelectSize" name="SelectSize" required=""&gt;
      &lt;option selected="selected"&gt;Select Size&lt;/option&gt;
      &lt;option value="Vest_10_08"&gt;10 tall X 14 wide&lt;/option&gt;
      &lt;option value="Vest_10_10"&gt;14 tall X 14 wide&lt;/option&gt;
      &lt;option value="Vest_10_12"&gt;16 tall X 14 wide&lt;/option&gt;
      &lt;option value="Vest_10_14"&gt;16 tall X 16 wide&lt;/option&gt;
      &lt;option value="Vest_10_16"&gt;18 tall X 16 wide&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;select id="SelectHardware" name="SelectHardware" required=""&gt;
      &lt;option selected="selected"&gt;Select Hardware&lt;/option&gt;
      &lt;option value="C"&gt;Chrome&lt;/option&gt;
      &lt;option value="SB"&gt;Black&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;select id="SelectColor" name="SelectColor" required=""&gt;&lt;/select&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input id="item_name" name="item_name" type="text" style="width: 200px" /&gt;</code></pre>
  </div>
  </div>
  </p>