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

Question

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.

1. To add values to the option tags example:

   option value="X">Clear,option value="T">Smoke,option value="GS">Gunsmoke

2. 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.

Any help would be greatly 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" />

Answer 1

First of all, it's generally considered a bad practice to use eval in general. A good re-write could use objects to store your values instead of using individually named variables. You can also use objects to store the value and display properties.

Something like this...

var vestData = {
    'Vest_10_08':[
        {
            value:'',
            text:'Select Color'
        },
        {
            value:'S',
            text:'Smoke'
        },
        {
            value:'GS',
            text:'Gun Smoke'
        }
    ],
    'Vest_10_10':[
        // ...
    ]
};

However, since you have duplicate items with the same values you might want one master object to reference the internal values to the display values like 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)

    }
});

Answer 2

You must change your Arrays to compute objects instead of strings. E.g:

var Vest_10_08 = [
  { value: '', text: "Select Color" },
  { value: 'X', text: "Clear" },
  { value: 'T', text: "Smoke" },
  { value: 'GS', text: "Gunsmoke" }
];

And then, when you're looping through the Array:

$('#SelectColor').append('<option value="' + t.value + '">' + t.text + '</option>');

---

Note: Nothing to do with the question, but only a tip: I don't think it's a good idea to use eval, the way you're doing. You could simply use a keyvaluepair object, and then you'd use the ID as its key. E.g:

var vests = {
  Vest_10_08: [
    { value: '', text: "Select Color" },
    { value: 'X', text: "Clear" },
    { value: 'T', text: "Smoke" },
    { value: 'GS', text: "Gunsmoke" }
  ],
  Vest_10_10: [
    /* (...) */
  ]
};

And then you could use it, instead of using eval, by doing:

vests[SelectSize].forEach(