jQuery只针对每个其他选择选项？

Question

我正在学习Javascript和jQuery，在下面的示例代码中遇到了一个问题，我似乎无法找出其原因。我试图编写一个脚本，使第二个下拉菜单反映第一个下拉菜单中选择的选项。

我很好奇为什么我的当前代码似乎只针对每两个选择选项中的一个。由于我是新学习Javascript / jQuery的人，如果这是一个显而易见的答案，我很抱歉，但我真的很希望有人能解释一下为什么这段代码只针对我的一半选择选项，而不是所有选择选项，以及如何修复它，这样我就可以从这个错误中学习。

  <style>
  #sweets {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<select id="sweets" >
  <option value="Chocolate">Chocolate</option>
  <option value="Candy">Candy</option>
  <option value="Taffy">Taffy</option>
  <option value="Caramel">Caramel</option>
  <option value="Fudge">Fudge</option>
  <option value="Cookie">Cookie</option>
</select>
<select id="target">
  <option value="Chocolate">Chocolate</option>
  <option value="Candy">Candy</option>
  <option value="Taffy">Taffy</option>
  <option value="Caramel">Caramel</option>
  <option value="Fudge">Fudge</option>
  <option value="Cookie">Cookie</option>
</select>

<script>
$( "#sweets" )
  .change(function () {
    var str = "";
    $( "option:selected" ).each(function() {
      str += $( this ).val();
    });
    $( "#target" ).val( str );
  })
  .change();
</script>

此外，这里还有相同代码的JSFiddle。 https://jsfiddle.net/2xnmr0pa/1/

- Josh979

---

想一想 $( "option:selected" ).each 的作用：它遍历了所有被选中的选项，即使它们在不同的 select 列表中。因此，你试图设置的值是像 "TaffyCandy" 而不是 "Taffy" 这样的东西。这样的值并不存在。只有当选择了 两个 选项时，该值才始终为两个值。 - Sebastian Simon

好的，现在我完全明白了。谢谢！ - Josh979

由于您是JS的新手，我建议您使用console.log并使用浏览器控制台调试代码，以自行查找代码中的意外行为。 - Sebastian Simon

Answer 1

问题出在以下代码中：

$( "option:selected" )  // selected options from ANY list on the page

这将从两个列表中选择所有已选选项，而不仅仅是第一个列表。

因此，每次在第一个列表上选择一个值时，您还需要获取另一个列表中当前选择的值，将它们都附加起来，然后尝试将其设置为第二个列表的新值。

修复方法很简单，只需通过更改上面的代码来限制您对第一个列表中已选选项的选择：

$( "#sweets option:selected" ); // selected options in the #sweets list

或者你可以利用jQuery在附加函数中切换上下文（this的值）到附加函数所附加的元素，并找到其选定的选项：

$(this).find('option:selected')

- nem035

---

谢谢解释为什么这个不起作用！我现在明白问题所在以及原因，即组合选择选项的值不等于单个选择选项，因此我需要针对 #sweets 选项而不是所有选项字段进行目标定位，因为这会获取两个下拉菜单的值。 - Josh979

没问题，很高兴能帮忙！ - nem035

Answer 2

您只需要的是：

：

所有您需要的是：

$("#sweets").change(function () {
    var str = $(this).val();
    $("#target").val(str);
}).change();

如果你在使用 .each 时记录 str 值，你会发现它有时候会将多个值拼接在一起，导致无法选择。

- SuperPrograman

Answer 3

将您的代码更改如下，无需使用.each()

$( "#sweets" )
 .change(function () {
 //var str = "";
 // $( "option:selected" ).each(function() {
 //    str = $( this ).val();
 //});
  var str = $( this ).val();
 $( "#target" ).val( str );
})
.change();

- Sudipta Kumar Maiti

Answer 4

如果你好奇想要知道纯JavaScript的实现是什么样子的：

https://jsfiddle.net/ryanpcmcquen/eys05d3u/

document.getElementById("sweets").addEventListener('change', function (e) {
  var sweets = e.target;
  var str = "";
  str += sweets.querySelector('option:checked').value;
  document.querySelector("#target").value = str;
});

#sweets {
  color: red;
}

<select id="sweets">
  <option value="Chocolate">Chocolate</option>
  <option value="Candy">Candy</option>
  <option value="Taffy">Taffy</option>
  <option value="Caramel">Caramel</option>
  <option value="Fudge">Fudge</option>
  <option value="Cookie">Cookie</option>
</select>
<select id="target">
  <option value="Chocolate">Chocolate</option>
  <option value="Candy">Candy</option>
  <option value="Taffy">Taffy</option>
  <option value="Caramel">Caramel</option>
  <option value="Fudge">Fudge</option>
  <option value="Cookie">Cookie</option>
</select>

- ryanpcmcquen

---

有趣。谢谢你的发布！已点赞。不过我注意到一件事，就是用这种方法，似乎第二个下拉列表框不能直接单独更改了。 - Josh979

@Josh979，感谢您的注意，现在已经通过条件语句进行修复。 ;^) - ryanpcmcquen