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

Question

我的 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());
    });
});

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

Answer 1

每次，我都会得到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 browser support。

JsFiddle：https://jsfiddle.net/m3hranTi/uzc9jzps/

Answer 2

不要使用.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>