javascript - Jquery 只针对所有其他选择选项？

Question

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

我很想知道为什么我当前的代码似乎只针对所有其他选择选项。我刚开始学习 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/

Answer 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')