在多选下拉jquery中获取最近选择的选项的索引

Get the index of recently selected option in multiselect dropdown jquery

本文关键字：选择 最近 选项 索引 获取 jquery      更新时间：2023-09-26

我的html页面中有一个选择下拉列表。如何获取最近选择的选项的索引，而不是最后一个选项的索引。我看到我们可以使用'last'，但它会给出最后一个选项，该选项不是最新的。

.HTML

<select class="carMenu" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

jQuery

$(document).ready(function () {
    $('.carMenu').change(function(){
         console.log($('option:selected',$(this)).index());
    });
});

如果我们选择"欧宝"，然后选择"沃尔沃"，我们应该得到零作为索引。但现在它给出了"欧宝"的索引。

每次，我都会得到carMenu值，其中包含所有选定选项的值，然后将其与上次进行比较以检测最近添加了哪个项目。代码还支持取消选择选项。事实上，它会保留一堆indexes并在取消选择时弹出index。尝试代码：

var recent_options = selected_options = added_options = removed_options = [];
var current_values, index;
$(document).ready(function () {
    $('.carMenu').change(function(){
        current_values = $(this).val();
        if (current_values && current_values.length > 0) {
            added_options = current_values.filter(function(x) { return recent_options.indexOf(x) < 0 });
            if (added_options.length > 0) {
                selected_options.push($(this).find("option[value='" + added_options[0] + "']").index());
                console.log("last selected option is : " + selected_options[selected_options.length-1]);
            }
            else {
                removed_options = recent_options.filter(function(x) { return current_values.indexOf(x) < 0 });
                if (removed_options.length > 0) {   
                    index = selected_options.indexOf($(this).find("option[value='" + removed_options[0] + "']").index());
                    if (index > -1)
                        selected_options.splice(index, 1);
                    console.log("last selected option is : " + selected_options[selected_options.length-1]);
                }
            }
        }
        recent_options = current_values ? current_values : [];
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="carMenu" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

如果您不希望支持取消选择选项，只需删除else if (added_options.length > 0)的一部分即可。

另请注意indexOf浏览器支持。

小提琴：https://jsfiddle.net/m3hranTi/uzc9jzps/

不要使用 .change() 事件，而是在选项上使用 .click()。

$(function() {
  $('.carMenu option').click(function() {
    if ($(this).is(':selected')) {
      console.log($(this).index());
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="carMenu" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

相关文章：