javascript - 如何将值添加到从数组加载的 <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)

    }
});