Question

我有许多选择框已设置为接受多个值。反正我是否可以使用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);

    });

})

谢谢

Answer 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);也是值得的，只是让你知道你实际使用的元素。

Answer 2

使用最后一个功能：像这样

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

Answer 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);
});
});

Answer 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'));
    }
});});

获取多个select元素的最后选择的值

4 个答案: