获取多选下拉列表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());
    });
});

如果选择“ Opel”然后选择“ Volvo”，则索引应该为零。 但是现在它给出了“欧宝”的索引。

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>

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

另请注意indexOf浏览器支持 。

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

Answer 2

代替使用.change()事件， .click()在选项上使用.change() 。

 $(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>