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

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();

但这行不通。如何在不更改 html 中的任何内容的情况下找出 Jquery 中的正确索引？

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>