Question

我有多个具有相同ID和名称的选择，我想知道如何获取更改后的选择的索引，不该选择的元素/选项的索引。 / p>

这是我的尝试：

$("select").change(function ()
{
    var index = $(this).index();
    checkTypes(index);
})

它总是返回索引0。

我的观点（在for循环中）

@Html.DropDownListFor(m => m.Columns[i].Type, new SelectList(Model.Columns[i].Types), new { @ID = "Typeselection", @class = "form-control", @style="width:150px;" })

哪个会生成以下HTML：

<select id="Typeselection" class="form-control" data-val="true" data-val-required="Das Feld &quot;Typ&quot; ist erforderlich." name="Columns[0].Type" style="width:150px;">
<option selected="selected">BigInt</option>
<option>Binary</option>
<option>Bit</option>
</select>
<select id="Typeselection" class="form-control" data-val="true" data-val-required="Das Feld &quot;Typ&quot; ist erforderlich." name="Columns[1].Type" style="width:150px;">
<option>BigInt</option>
<option>Binary</option>
<option>Bit</option>
</select>

Answer 1

如果您的<select>不是兄弟姐妹，则您的代码将无效。

要使其在没有兄弟姐妹的情况下工作，您必须遍历初始选择器$('select')，并使用jQuery .is()方法逐一检查每个元素：

$('select').on('change', function() {
  let that = this;  // that = the <select> that changed
  let index;

  $('select').each(function(i) { // Loop through all your <select>s
    if ($(this).is($(that))) index = i; // Store the right one's index
  });
  
  console.log(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="Typeselection" class="form-control" data-val="true" data-val-required="Das Feld &quot;Typ&quot; ist erforderlich." name="Columns[0].Type" style="width:150px;">
    <option selected="selected">BigInt</option>
    <option>Binary</option>
    <option>Bit</option>
  </select>
</div>
<div>
  <select id="Typeselection" class="form-control" data-val="true" data-val-required="Das Feld &quot;Typ&quot; ist erforderlich." name="Columns[1].Type" style="width:150px;">
    <option>BigInt</option>
    <option>Binary</option>
    <option>Bit</option>
  </select>
</div>

如何获取更改后的选择的索引？

1 个答案: