我正在尝试在javascript中设置选择值dropdownlist。我有如下下拉列表:
<div class="gender_option" id="create">
<span class="value">
<select name="account" class="select-gender">
<option value="Unknown">Please select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</span>
</div>
首先,我尝试了getElementByClassName。我在stackoverflow中搜索了很多答案问题并进行了应用,但此方法不再起作用。以下代码是其中之一。该代码会引发类似的错误undefined options
。我更改了选项而不是选项,但仍然无法正常工作。
var e = document.getElementsByClassName('select_gender');
e[1].options[e[1].selectedIndex].selected=true;
我检查并应用了许多解决方案,例如以下说明:通过类名设置元素的值,而没有元素的ID 如何使用getElementsByClassName确定所选下拉选项的值?
我也发现queryselector我尝试下面的代码不起作用。
var selectElement = document.querySelector('.select_gender');
var output1 = selectElement.options[selectElement.selectedIndex].value;
for (var j=0; j<output1.length; j++) {
if (radioElements[i].getAttribute('value') == 'MALE') {
output1[j].selected=true;
}
}
我如何在没有ID参数的情况下在javascript中设置选择值
拉加兹
var selectElement = document.querySelector('.select_gender');
包含错别字:.select_gender
应该为.select-gender
。这就是为什么e[1].options[e[1].selectedIndex].selected=true;
会给您一个错误。
无论如何,您可以使用此CSS选择器将选择器的选定选项设置为某个选项(例如,Male)
document.querySelector(".select-gender option[value='Male']").selected = true;
// now selectedIndex (of the *selector*) is 1
console.log(document.querySelector(".select-gender").selectedIndex);
// and its value = "Male"
console.log(document.querySelector(".select-gender").value);
document.querySelector("button").addEventListener("click", setSelectorToFemale);
// set by finding the desired option
// not very practical, just to demo
function setSelectorToFemale() {
const desiredValue = "Female";
const foundOption = [...document.querySelectorAll(".select-gender option")]
// ^ spread ElementList to Array
.find(o => o.value === desiredValue);
// ^ only option with value desiredValue
if (foundOption) {
foundOption.selected = true;
}
}
<div class="gender_option" id="create">
<span class="value">
<select name="account" class="select-gender">
<option value="Unknown">Please select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</span>
<button>Select Female</button>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句