javascript - div 单击时多个选择会发生变化

Question

我试图在 div 单击时更改多个选择，问题是只有最后一次单击的保持选中，如果有人知道如何解决此问题，我将不胜感激。

编辑: 选择是动态的，所以我不知道会有多少个，因此我无法给它们提供类或 ID，我拥有的唯一数据是选项值。

$("div").on("click", function() {
  $("select").val($(this).data("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-value="1">1</div>
<div data-value="2">2</div>
<div data-value="3">3</div>

<div data-value="a">a</div>
<div data-value="b">b</div>
<div data-value="c">c</div>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

Answer 1

您的data-value值对于这两个选择都无效。如果您尝试设置该选择的选项之一中不存在的值，则不会显示任何值。

您可以使用 :has() 选择器修饰符使其仅更改包含具有该值的选项的选择值。

$("div").on("click", function() {
  let newval = $(this).data("value");
  $(`select:has([value='${newval}'])`).val(newval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-value="1">1</div>
<div data-value="2">2</div>
<div data-value="3">3</div>

<div data-value="a">a</div>
<div data-value="b">b</div>
<div data-value="c">c</div>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>