javascript - How to add values to <option> tag loaded from array -

i have multi part form load color options based on size selection not add values option tag , cant seem find solution. is.

1. to add values option tags example:

   option value="x">clear,option value="t">smoke,option value="gs">gunsmoke

2. output html selected options text can display client selections in readable format before submit final step.

any appreciated. thanks

my 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('<option>' + t + '</option>');          });        }        function populatepart() {          selectsize = $('#selectsize').val();          selecthardware = $('#selecthardware').val();          selectcolor = $('#selectcolor').val();          document.getelementbyid('item_name').value = (selectsize + '66' + selecthardware + selectcolor)        }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <select id="selectsize" name="selectsize" required="">      <option selected="selected">select size</option>      <option value="vest_10_08">10 tall x 14 wide</option>      <option value="vest_10_10">14 tall x 14 wide</option>      <option value="vest_10_12">16 tall x 14 wide</option>      <option value="vest_10_14">16 tall x 16 wide</option>      <option value="vest_10_16">18 tall x 16 wide</option>  </select>  <br>  <br>  <select id="selecthardware" name="selecthardware" required="">      <option selected="selected">select hardware</option>      <option value="c">chrome</option>      <option value="sb">black</option>  </select>  <br>  <br>  <select id="selectcolor" name="selectcolor" required=""></select>  <br>  <br>  <input id="item_name" name="item_name" type="text" style="width: 200px" />

first of all, it's considered bad practice use eval in general. re-write use objects store values instead of using individually named variables. can use objects store value , display properties.

something this...

var vestdata = {     'vest_10_08':[         {             value:'',             text:'select color'         },         {             value:'s',             text:'smoke'         },         {             value:'gs',             text:'gun smoke'         }     ],     'vest_10_10':[         // ...     ] }; 

however, since have duplicate items same values might want 1 master object reference internal values display values this.

var colornames = {     'c':'clear',     's':'smoke',     'gs':'gun smoke' }  var coloroptions = {     'vest_10_08':['c','s','gs'],     'vest_10_10':['c','s','gs'],     'vest_10_12':['c','s','gs'],     'vest_10_14':['c','s'],     'vest_10_16':['c','s'] };  $(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('<option value="">select color</option>');          coloroptions[selectsize].foreach(function (t) {             $('#selectcolor').append('<option value="' + t + '">' + colornames[t] + '</option>');         });      }      function populatepart() {         selectsize = $('#selectsize').val();         selecthardware = $('#selecthardware').val();         selectcolor = $('#selectcolor').val();         document.getelementbyid('item_name').value = (selectsize + '66' + selecthardware + selectcolor)      } });