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

Question

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

1. 要为选项标签示例添加值：

   选项值=＆＃34; X＆＃34;＆gt;清除，选项值=＆＃34; T＆＃34;＆gt;抽烟，选项值=＆＃34; GS＆＃34;＆gt; Gunsmoke

2. 以html形式输出选定的选项文本，这样我就可以在提交最后一步之前以可读的格式向客户显示他们的选择。

非常感谢任何帮助。感谢

我的代码

＆＃13;
＆＃13;
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)

    }
});
＆＃13;
<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" />
＆＃13;
＆＃13;
＆＃13;

Answer 1

您必须更改数组以计算对象而不是字符串。 E.g：

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

然后，当你循环遍历数组时：

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

注意：与问题无关，只是提示：我认为使用eval并不是一个好主意，就像你正在做的那样。您可以简单地使用keyvaluepair对象，然后使用ID作为其键。 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: [
    /* (...) */
  ]
};

然后您可以通过执行以下操作来使用它，而不是使用eval：

vests[SelectSize].forEach(

Answer 2

首先，通常认为使用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)

    }
});

Answer 3

var Vest_10_08 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"});

var Vest_10_10 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"});

var Vest_10_12 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"}, {name: "Gunsmoke", option: "GS"});

var Vest_10_14 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"});

var Vest_10_16 = new Array({name: "Select Color", option: 0}, {name: "Clear", option: "X"}, {name: "Smoke", option: "T"});


$(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 value=' + t.option + '>' + t.name + '</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.11.1/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 4

只需将您的颜色细节放在另一个对象中。您无需在所有＆＃34; Vest_10 _ *＆＃34;

中复制所有颜色值

＆＃13;

＆＃13;

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");

//New added
var Colors = {};
Colors['Select Color'] = '0';
Colors['Clear'] = 'X';
Colors['Smoke'] = 'T';
Colors['Gunsmoke'] = 'GS';

$(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('');

		//Changes in this function
		eval(SelectSize).forEach(function (t) {
			console.log(t);
			var value = Colors[t];
			console.log(value);
			$('#SelectColor').append('<option value="'+value+'">' + t + '</option>');
		});

	}

	function populatePart() {
		SelectSize = $('#SelectSize').val();
		SelectHardware = $('#SelectHardware').val();
		SelectColor = $('#SelectColor').val();
		document.getElementById('item_name').value = (SelectSize + '66' + SelectHardware + SelectColor)

	}
});

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

如果你想避免＆＃34; eval＆＃34;代码在这里： http://jsfiddle.net/bhushankumar/0b4azsuf/2/

Answer 5

使用模板库，如下划线或把手或小胡子。从javascript生成html的不良做法。

Answer 6

您可以在javascript中格式化输入，并使用数组内部构造和对象：

var choices = {1:["oneValue", "twoValue"], 2:["oneHtml", "twoHtml"]};

function addInputSelect(divName) {
  var newDiv = document.createElement('div');
  var selectHTML = "";
  selectHTML="<select>";
  for(i = 0; i < choices.length; i = i + 1) {
  /* choices[1][i] for get the first object in array position i */
      selectHTML += "<option value='" + choices[1][i] + "'>" + choices[2][i] + "</option>";
  }
  selectHTML += "</select>";
  newDiv.innerHTML = selectHTML;
  /* append the html constructed to the dom. (divName is the html div dynamicInput) */
  document.getElementById(divName).appendChild(newDiv);
}


<!-- html -->
<div id="dynamicInput"></div>
<input type="button" value="Add" onclick="addInput('dynamicInput');" />