Javascript，自动选择下拉菜单

Question

所以我试图用 Javascript 做的就是当我做类似 document.getElementByID("product-select").value = "34"; 的事情时做到这一点 它会自动帮我按下。

每当我尝试执行此操作时，它都会使下拉菜单变为空白，并且不会自动更改它。我可以帮忙吗？

<div id="product-variants" class="">
  <div class="select-wrapper">
    <select id="product-select" name="id" class="">




      <option value="28223706565">32</option>



      <option value="28223706629">34</option>



      <option value="28223706693">36</option>


    </select>
  </div>
</div>

Answer 1

下拉值不会自动更改的原因是，当您使用 设置下拉值时document.getElementByID("product-select").value = "34"，它不会选择文本节点为 34 的选项，只有当您的选项之一的值为 34 时，才会更改下拉列表。为了使其工作，您可以更改您的实现，如下所示：

var options = document.getElementById("product-select").options;
for (var i = 0; i < options.length; i++) {
  if (options[i].text == "34") {
    options[i].selected = true;
    break;
  }
}