使用 JavaScript 动态设置选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10247423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically set select-options with JavaScript
提问by nimrod
How can I dynamically set the options from my html select field with Javascript? This is my page setup:
如何使用 Javascript 从我的 html 选择字段中动态设置选项？这是我的页面设置：
<form name="test">
<table>
<tr>
<td class='dataleft'>Product: </td>
<td><select name='inptProduct'></select></td>
</tr>
</table>
</form>
I have all values in an array. This is the location to set the <option>s.
我有一个数组中的所有值。这是设置<option>s的位置。
for(var i = 0; i < productArray.length; i++) {
console.log("<option value='" + productArray[i] + "'>" + productArray[i] + "</option>");
}
PS: jQuery can be used.
PS：可以使用jQuery。
Solution:This is the final solution I was looking for. It does not apply the new options to the select field. It removes all first, and then adds the new ones:
解决方案：这是我正在寻找的最终解决方案。它不会将新选项应用于选择字段。它首先删除所有，然后添加新的：
var optionsAsString = "";
for(var i = 0; i < productArray.length; i++) {
optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>";
}
$("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString));
采纳答案by gotofritz
wellyou have almost done it all:
你几乎已经完成了这一切：
var optionsAsString = "";
for(var i = 0; i < productArray.length; i++) {
optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>";
}
$( 'select[name="inptProduct"]' ).append( optionsAsString );
EDITremoved $ wrapper around last optionsAsStringas appendautomatically converts strings
EDIT删除了 $ 包装器，optionsAsString因为它会append自动转换字符串
回答by hunter
var $inputProduct = $("select[name='inputProduct']")
$(productArray).each(function(i, v){
$inputProduct.append($("<option>", { value: v, html: v }));
});
回答by Luke Stevenson
Assuming that the array productArrayis a simple array, with each element being the value of the option, and the desired title for that option.
假设数组productArray是一个简单的数组，每个元素都是选项的值，以及该选项所需的标题。
$( 'select[name="inptProduct"]' )
.html( '<option>' + productArray.join( '</option><option>' ) + '</option>' );
Example:
例子：
productArray = ['One', 'Two', 'Three'];
// With the original code being
<select name="inptProduct">
<option>There could be no options here</option>
<option>Otherwise, any options here will be overwritten</option>
</select>
// Running the code above would output
<select name="inptProduct">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
回答by Nagen Biswal.
function onLoad() {
var type = new Array("Saab","Volvo","BMW");
var $select = $("select[name='XXXXXType']")
alert($select);
$(type).each(function(i, v){
$select.append($("<option>", { value: v, html: v }));
});
}
<select name="XXXXXType" id="XXXXXType"></select>
回答by Menuka Ishan
If you not insisting for pure JavaScript to do the job, you can easily done the job using jQuery.
如果您不坚持使用纯 JavaScript 来完成这项工作，您可以使用 jQuery 轻松完成这项工作。
<form name="test">
<table>
<tr>
<td class='dataleft'>Product: </td>
<td><select id='inptProduct'></select></td>
</tr>
</table>
</form>
for (var i = 0; i < productArray.length; i++) {
$("#inptProduct").append('<option value=' + if_you_want_set_value + '>' + productArray[i] + '</option>');
}
Note that here I used the id of select tag. That's why I add the html part too. Hope you know how to add jQuery.
请注意，这里我使用了 select 标签的 id。这就是为什么我也添加了 html 部分。希望你知道如何添加 jQuery。
回答by Radacina
I usually do it like this:
我通常这样做：
document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>";
document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>";
回答by ZERO
you can set id for the select id=inptProduct Then do $('#inptProduct').val(yourselectValue)
您可以为 select id=inptProduct 设置 id 然后执行 $('#inptProduct').val(yourselectValue)
