Question

举个例子，我有以下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进行更新，然后转到另一个菜单，选择一个选项并让它更新其< / em> DIV

我缺少任何明显的事情？

由于

Answer 1

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

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

Working Demo

Answer 2

使用 $（this）获取jquery中的当前对象

$("select").change(function () {
  var str = $("option:selected", this).text();
  $('.' + $(this).attr('name')).text(str);
}).change();

Fiddle

Answer 3

$( "select" ).change(function () {
    var selectname = $(this).attr('name');
    var str = $(this).find("option:selected" ).text();
    $( "div."+selectname ).text( str );
  })
  .change();

我发现这是最好的，因为DIV可以在页面上移动

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

3 个答案:

Working Demo