使用javascript正确选择selectbox的值？

问题描述

我正在尝试使用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后，SeleectBox将显示我使用此命令选择的值。

但是当我点击网站底部的“确认”按钮转到下一页时，网站显示我没有选择任何内容。

这是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的值吗？

解决方法

您必须在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>

,

您必须在selected元素上设置<option>属性。这不仅会更改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>