Question

我有多个具有相同类但不同值的下拉菜单。在更改下拉选择值时，我需要知道索引。下面是我的以下代码：

$("body").on("change", ".ddlFruit", function () {
    var fruitIndex = $(".ddlFruit option:selected").index();
    alert(fruitIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Apple</option>
      <option value="2">Bannana</option>
      <option value="3">Mango</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Water Melon</option>
      <option value="2">Kiwi</option>
      <option value="3">Peach</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Strawberry</option>
      <option value="2">Papaya</option>
      <option value="3">Grapes</option>
    </select>
  </div>
</div>

这个问题是，即使我更改了第二个或第三个下拉列表中的值，它也总是给出第一个下拉列表的索引。我尝试过

var fruitIndex = $("this option:selected").index();

但这不起作用。如何在Jquery中找出正确的索引而不必更改html中的任何内容？

Answer 1

使用this上下文作为second argument in the jQuery function。

var fruitIndex = $("option:selected", this).index();

$("body").on("change", ".ddlFruit", function () {
    var fruitIndex = $("option:selected", this).index();
    alert(fruitIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Apple</option>
      <option value="2">Bannana</option>
      <option value="3">Mango</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Water Melon</option>
      <option value="2">Kiwi</option>
      <option value="3">Peach</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Strawberry</option>
      <option value="2">Papaya</option>
      <option value="3">Grapes</option>
    </select>
  </div>
</div>

或使用find()方法在this上下文中获取元素。

var fruitIndex = $(this).find("option:selected").index();

$("body").on("change", ".ddlFruit", function () {
    var fruitIndex = $(this).find("option:selected").index();
    alert(fruitIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Apple</option>
      <option value="2">Bannana</option>
      <option value="3">Mango</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Water Melon</option>
      <option value="2">Kiwi</option>
      <option value="3">Peach</option>
    </select>
  </div>
</div>

<div class="col-md-12">
  <div class="col-xs-3">
    <select class="form-control ddlFruit">
      <option value="1">Strawberry</option>
      <option value="2">Papaya</option>
      <option value="3">Grapes</option>
    </select>
  </div>
</div>

获取同一类的多个下拉列表的选定索引

1 个答案: