javascript – Jquery仅针对所有其他选择选项？

我正在研究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/

解决方法:

问题出在以下代码中：

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

这将从BOTH列表中选择所有选定的选项,而不仅仅是第一个.

因此,每次在第一个列表中选择一个值时,也可以从另一个列表中获取当前选定的值,将它们都附加,然后尝试将其设置为第二个列表的新值.

修复很简单,只需将上面的代码更改为以下代码,即可将所选选项限制在第一个列表中：

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

或者您可以使用jQuery将附加函数中的上下文(this的值)切换到函数附加到的元素并只找到其选定选项的事实：

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