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>

原文由 Bigboymanted 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

下拉值不自动更改的原因是，当您使用 document.getElementByID("product-select").value = "34" 设置下拉值时，它不会选择文本节点为 34 的选项，这只会在您的其中一个时更改下拉列表options 的值为 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;
  }
}

原文由 Nishesh Pratap Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

也许

document.getElementByID("product-select").value = "34";

应该

document.getElementByID("product-select").value = "28223706629";

另一种方法是引用索引，例如

document.getElementById("product-select").selectedIndex = 1;

原文由 Tim D 发布，翻译遵循 CC BY-SA 3.0 许可协议