JQuery 设置选择的选项答案

【问题标题】：JQuery Set selected optionJQuery 设置选择的选项
【发布时间】：2018-12-29 16:27:30
【问题描述】：

我有两个选择框，默认值为 - 我想为两者选择其他内容，我的第一个问题是两个字段都有动态 id，如 prod-685209-Size，所以我无法使用 id 访问。

我有以下 HTML：

<select class="sku-attr" name="Size">
<option value="_def">-</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
</select>

<select class="sku-attr" name="Color">
    <option value="_def">-</option>
    <option value="Black">Black</option>
    <option value="Blue">Blue</option>
</select>

所以我执行了以下操作：
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
它在前端工作，显示了我的新选项，但它没有提示后端，因为它实际上并没有选择选项。当我手动单击这些选项时，后端工作正常，基本上我需要另一种解决方案来选择这些选项。

【问题讨论】：

如果没有正确提交，则在运行该代码时会出现问题。提供minimal reproducible example
但它没有提示后端 -- 是的，因为脚本是在前端执行的。你能发布什么代码通知后端值的变化？

标签： javascript jquery dom jquery-selectors html-select

【解决方案1】：

如果我没有误解您的要求，那么您需要这样的东西。只需将两个不同的 ids 添加到您的 select 元素并附加一个 change 事件侦听器。例如 size 和 color

var s = document.getElementById("size");
var c = document.getElementById("color");

function getSize() {
  sizeSelected = s.value;
  console.log('size=' + sizeSelected);
}

function getColor() {
  colorSelected = c.value;
  console.log('color=' + colorSelected);
}

s.addEventListener('change', getSize);
c.addEventListener('change', getColor);

<select id="size" class="sku-attr" name="Size">
  <option value="_def">-</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

<select id="color" class="sku-attr" name="Color">
  <option value="_def">-</option>
  <option value="Black">Black</option>
  <option value="Blue">Blue</option>
</select>

【讨论】：

【解决方案2】：

您需要在 dom 命令之后添加 .validate() 才能真正提示页面。

【讨论】：