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;
  }
}