要使用JavaScript设置<input>
元素的数据,请按如下所示分配该元素的值和名称:
var form = document.createElement("form");
var element = document.createElement("input");
element.value=value;
element.name=name;
在<select>
属性为multiple
的情况下,如何设置选择元素的值?例如,如何设置下面的myselect
元素的值:
<form method="post" action="/post/" name="myform">
<select multiple name="myselect" id="myselect">
<option value="1">option1</option>
<option value="2">option2</option>
...
我尝试通过执行myselect.value=[1,2]
来设置值,但是它不起作用。选择option1
和option2
之后,我希望它返回[1,2]
,但它只返回“ 1”。
答案 0 :(得分:1)
有效
var element = document.getElementById('selectMultiple');
// Set Values
var values = ["Gold", "Bronze"];
for (var i = 0; i < element.options.length; i++) {
element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}
// Get Value
var selectedItens = Array.from(element.selectedOptions)
.map(option => option.value)
spanSelectedItens.innerHTML = selectedItens
<select name='selectMultiple' id="selectMultiple" multiple>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
</select>
<br />
Selected: <span id="spanSelectedItens"></span>
答案 1 :(得分:0)
您可以通过options
对象的select
属性访问选择选项数组。每个选项都有一个selected
属性,您可以设置。
document.myform.myselect.options[0].selected = true;
您可以使用查询选择器按值访问选项:
document.myform.myselect.querySelector("option[value="+value+"]")[0].selected = true;
答案 2 :(得分:0)
要以编程方式在多项选择中设置多个值选项,需要将selected
属性手动添加到要选择的<option>
元素中。
一种解决方法如下:
const select = document.getElementById('myselect')
const selectValues = [1, 2];
/* Iterate options of select element */
for (const option of document.querySelectorAll('#myselect option')) {
/* Parse value to integer */
const value = Number.parseInt(option.value);
/* If option value contained in values, set selected attribute */
if (selectValues.indexOf(value) !== -1) {
option.setAttribute('selected', 'selected');
}
/* Otherwise ensure no selected attribute on option */
else {
option.removeAttribute('selected');
}
}
<select multiple name="myselect" id="myselect">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>