如何将值添加到从数组加载的<option>标记中

Question

我有一个多部分表单来加载基于大小选择的颜色选项,但它不会向选项标签添加值,我似乎无法找到解决方案.我想要的是什么.

1. 要为选项标记示例添加值:

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

2. 输出为html所选的选项文本,以便我可以在提交最后一步之前以可读格式向客户显示他们的选择.

任何帮助将不胜感激.谢谢

我的守则

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

首先，一般来说，它被认为是一种不好的做法eval。良好的重写可以使用对象来存储值，而不是使用单独命名的变量。您还可以使用对象来存储值和显示属性。

像这样的东西...

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

但是，由于您有具有相同值的重复项目，您可能希望一个主对象将内部值引用到显示值，如下所示。

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)

    }
});