正确使用javascript选择选择框的值？

Question

我正在尝试使用 javascript 选择选择框的特定值。我计划使用 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 的选择框部分。

<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 代码进行非常小的更改。
首先，您必须设置选择标签的 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>