是否正确使用javascript选择selectbox的值

Question

我正在尝试使用javascript选择selectbox的特定值。我计划使用jQuery来选择一个元素，但不知何故，我试图自动化的网站阻止了它，或者不使用jQuery。

因此，我使用document.querySelector();选择了一个元素。如下图所示。

document.querySelector("#softBoardListLayer > div:nth-of-type(2) > div:nth-of-type(1) > table > tbody > tr:nth-of-type(1) > td > select").selectedIndex = 01;

它确实有效。运行此javascript后，Selectbox显示我使用此命令选择的值。

但当我点击网站底部的确认按钮进入下一页时，网站上说我什么都没选。

这是html的selectbox部分。

<select data-v-f6ebec28="" name="" id="">
<option data-v-f6ebec28="" value="">Select...</option>
<option data-v-f6ebec28="" value="01">Seoul</option>
<option data-v-f6ebec28="" value="02">Busan</option>
<option data-v-f6ebec28="" value="03">Jeju</option>
</select>

有什么方法可以正确地选择selectbox的值吗？

Answer 1

您必须对HTML代码进行非常小的更改
首先，您必须设置select标记的id
然后，您必须将该id放入document.querySelector("#select-option")语句中。

document.querySelector("#select-option").value = '01';

<select data-v-f6ebec28="" name="" id="select-option">
<option data-v-f6ebec28="" value="">Select...</option>
<option data-v-f6ebec28="" value="01">Seoul</option>
<option data-v-f6ebec28="" value="02">Busan</option>
<option data-v-f6ebec28="" value="03">Jeju</option>
</select>

Answer 2

您必须在<option>元素上设置selected属性。这不仅会更改UI，还可以确保通过询问元素的.value属性得到正确的值：

function setSelected(selectEl, valueToSelect) {
var options = selectEl.children, i = 0;
for (; i < options.length; i += 1) {
if (options[i].value === valueToSelect) { // <-- if the option has the value
options[i].selected = 'selected'; // <-- select it
} else {
options[i].selected = null; // <-- otherwise deselect it
}
}
}

var select = document.querySelector('select');
setSelected(select, '03');
console.log('Selected value is:', select.value);

<select data-v-f6ebec28="" name="" id="">
<option data-v-f6ebec28="" value="">Select...</option>
<option data-v-f6ebec28="" value="01">Seoul</option>
<option data-v-f6ebec28="" value="02">Busan</option>
<option data-v-f6ebec28="" value="03">Jeju</option>
</select>