Question

我有两个选择框，默认值为-，我想为两者都选择其他东西，我的第一个问题是两个字段都具有prod-685209-Size之类的动态ID，所以我在访问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
它在正面起作用，显示了我的新选项，但由于没有实际选择选项，因此没有提示后端。当我手动单击这些选项时，后端工作正常，基本上我需要另一个解决方案来选择这些选项。

Answer 1

如果我没有误解您的要求，那么您需要类似的东西。只需在select元素中添加两个不同的 id ，然后附加一个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>

Answer 2

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

jQuery Set选择的选项

2 个答案: