Question

我的html页面中有一个选择下拉列表。如何获取最近选择的选项的索引，而不是最后一个。我看到我们可以使用def compare(list1,list2): x=[] for i in list1: if i not in list2: x.append(i) return x，但它会提供最后一个选项而不是最新选项。

HTML

'last'

的jQuery

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

如果我们选择＆＃39;欧宝＆＃39;然后＆＃39;沃尔沃＆＃39;我们应该得到零作为索引。但现在它给出了欧宝的指数。

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的{{1}}部分。

另请注意 indexOf browser support 。

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

Answer 2

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

＆＃13;

$(function() {
  $('.carMenu option').click(function() {
    if ($(this).is(':selected')) {
      console.log($(this).index());
    }
  });
});

＆＃13;

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

＆＃13;

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

2 个答案: