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/

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

Answer 2

你需要的只是：

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

如果您在使用.each时记录str值，您可以看到有时它连接在一起的多个值使得选择无法进行。

Answer 3

如下所示更改您的代码，无需.each（）

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

Answer 4

如果您想知道纯JavaScript中的效果如何：

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

#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>

{{1}}

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

4 个答案: