[英]Dynamically set select-options with JavaScript
How can I dynamically set the options from my html select field with Javascript? 如何使用Javascript从我的html选择字段动态设置选项? This is my page setup: 这是我的页面设置:
<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>
的位置。
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));
wellyou have almost done it all: wellyou几乎完成了所有这些:
var optionsAsString = "";
for(var i = 0; i < productArray.length; i++) {
optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>";
}
$( 'select[name="inptProduct"]' ).append( optionsAsString );
EDIT removed $ wrapper around last optionsAsString
as append
automatically converts strings EDIT删除了最后一个optionsAsString
$ wrapper,因为append
自动转换字符串
var $inputProduct = $("select[name='inputProduct']")
$(productArray).each(function(i, v){
$inputProduct.append($("<option>", { value: v, html: v }));
});
Assuming that the array productArray
is 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>
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>
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. 请注意,这里我使用了select标签的id。 That's why I add the html part too. 这也是我添加html部分的原因。 Hope you know how to add jQuery. 希望你知道如何添加jQuery。
I usually do it like this: 我通常这样做:
document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>"
; document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>"
;
你可以为select id = inptProduct设置id然后执行$('#inptProduct')。val(yourselectValue)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.