获取多个选择元素的最后一个选择值答案

【问题标题】：Get last selected value of multiple select element获取多个选择元素的最后一个选择值
【发布时间】：2012-05-14 11:27:53
【问题描述】：

我有许多选择框已设置为接受多个值。无论如何，我可以使用 jQuery 来获取最后选择的值吗？我试过使用以下方法：

var latest_value = $("option:selected",this).val();

它什么也没返回。我只想要最后一个选择的值而不是值数组。

提前谢谢你

根据要求，这是我已将列表剪掉的 HTML，因为它太长了：

<select id="style-list" name="style-list[]" class="attrs" multiple="multiple">
    <option value="7">2 Pack</option>
    <option value="10">3 Pack</option>
    <option value="12">4 Pack</option>
</select>

然后在页面顶部我有以下内容（我有 8 个，但我展示了一些，以便您可以看到我正在使用多选小部件的多个实例：

$(document).ready(function(){

    $("#product-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Product",
       minWidth: 190  
    }).multiselectfilter();

    $("#style-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Style",
       minWidth: 190  
    }).multiselectfilter();


    $("#feature-list").multiselect({
       selectedList: 4,
       noneSelectedText: "Features",
       minWidth: 190  
    }).multiselectfilter();

});

然后我把它放在一个单独的 js 文件中：

$(function(){

    $(".attrs").on("multiselectclick", function(event, ui){

    var latest_value = $('option', this).filter(':selected:last').val(); 
    alert (latest_value);

    var view = $("#currentview").val();
    var page = 1;

    run_ajax(view,page);

    });

})

谢谢

【问题讨论】：

如果您正在寻找最近选择的选项而不是列表中最后出现的选定选项，请参阅stackoverflow.com/questions/8149532/…。

标签： jquery select

【解决方案1】：

使用:last 选择器：

var latest_value = $("option:selected:last",this).val();

可能是回调函数上下文中的this 不是指<select> 元素本身，而是指其中的一个元素，因此请尝试以下操作：

var latest_value = 
$(this).closest('select').find('option').filter(':selected:last').val();

在回调函数中调用console.log(this); 也是值得的，这样您就知道您实际使用的是什么元素。

【讨论】：

+1，但是，出于性能原因，我建议将.filter() 与伪类一起使用。 var latest_value = $('option', this).filter(':selected:last').val();
感谢您的回答，但没有一个建议奏效。我得到未定义的值
@Amara 在这种情况下，我们需要在问题中提供更多信息 - 听起来您原来的选择器也不正确。您能否包含相关的 HTML（实际的 HTML，而不是生成它的任何服务器端代码）和调用该代码行的 Javascript？
嗨@AnthonyGrist 我已经添加了您要求的信息。感谢您的帮助
当我们从多选中随机选择选项时，这不会返回正确的值，还有其他方法可以获取最后选择的值吗？

【解决方案2】：

使用最后一个函数：像这样

$("#style-list option:selected").last().val()

【讨论】：

【解决方案3】：

这是使用 Jquery 从多个选择列表中获取最新选择的选项的代码：

var selected;
$(document).ready(function() {
$('#SELECT_ID').on('click', function() {
var latestSelected;
if (selected) {
    var currentOptionsValue = $(this).val();
    latestSelected = currentOptionsValue.filter(function(element) {
    return selected.indexOf(element) < 0;
  });
}
selected = $(this).val();
console.log( "latest selected option : " + latestSelected);
});
});

【讨论】：

嗨 Mahak，您的回答很好。我需要找到最新的未选择值吗？
下面我给出了一个答案，它也适用于未选择的，尝试一次@KannanK

【解决方案4】：

是的，正如@KannanK 所说，上面的答案没有给出正确的值，因为它是根据下拉显示顺序存储值，所以如果从下到上选择，则会给出错误的值。

我有一个更好的逻辑来实现这一点。下拉列表的每次更改都会存储到一个全局变量中，以便我们可以在 differOpt 变量中获取最后选择的值。

var lastSelectedValues = [];
$('#yourID').change(function(e) {
    debugger;
    var currentSelVals = $('#yourID').val();
    var differOpt =arr_diff(currentSelVals,lastSelectedValues);
    lastSelectedValues = currentSelVals;
});
function arr_diff (a1, a2) {
    var a = [], diff = [];
    for (var i = 0; i < a1.length; i++) {
        a[a1[i]] = true;
    }
    for (var i = 0; i < a2.length; i++) {
        if (a[a2[i]]) {
            delete a[a2[i]];
        } else {
            a[a2[i]] = true;
        }
    }
    for (var k in a) {
        diff.push(k);
    }
    return diff;
}

更新一个更好的解决方案 我们可以使用 onChange 选项来选择/取消选择它给出正确的值

$(function () { $('#datadownAutpState').multiselect(
    onChange: function(option, checked) {
        alert(option.val + ' option ' + (checked ? 'selected' : 'deselected'));
    }
});});

【讨论】：

【解决方案5】：

据我了解，您只需要稍微更新一下您的 JS 文件

$(function(){

    $(".attrs").on("multiselectclick", function(event, ui){

        var latest_value = ui.value; 
        alert (latest_value);

        var view = $("#currentview").val();
        var page = 1;

        run_ajax(view,page);

    });

})

第二个参数ui的值如下：

{
    value: 'some value',
    text: 'option label',
    checked: true //whether option is selected or deselected
}

【讨论】：