jQuery - 获取选择值并使用多选菜单更新 Div

Question

jsFiddle:https://jsfiddle.net/x9bbb14n/

作为示例，我有以下 HTML:

<select name="sweets">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option>Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div class="sweets"></div>

<select name="cars">
  <option>Ford</option>
  <option selected="selected">Jaguar</option>
</select>
<div class="cars"></div>

我有这个 jQuery

$( "select" ).change(function () {
    var str = "";
    str = $( "select option:selected" ).text();
    $( "div" ).text( str );
  })
  .change();

我知道这是不正确的，但我希望能够选择一个选项及其要更新的 DIV，然后转到另一个菜单，选择一个选项并更新其其DIV

我遗漏了什么明显的东西吗？

谢谢

Answer 1

您可以使用当前单击的元素上下文以及下一个选择器来定位所需的 div:

$( "select" ).change(function () {
  var str = $(this).find("option:selected" ).text();
  $(this).next().text( str );
}).change();

Working Demo