如何从多选中获取最后选择的选项?
我正在寻找一种方法来使用jQuery以多选forms获取最后一个用户选择的选项。
我不是要查找列表中的最后一项,而是查找用户点击的最后一项。
像这样的东西
var lastSelected = null; $('.multiSelectOptions').click(function(){ lastSelected = this.value; });
当用户按住Ctrl并单击并选择多个项目时,如上面的答案中使用this.value
失败 – 它返回列表中第一个选择的值,即使这不是最后一次单击。 试试这个:
var previouslySelected = []; $("#myMultiselect").change (function() { // Get newly selected elements var currentlySelected = $(this).val(); var newSelections = currentlySelected.filter(function (element) { return previouslySelected.indexOf(element) == -1; }); previouslySelected = currentlySelected; if (newSelections.length) { // If there are multiple new selections, we'll take the last in the list var lastSelected = newSelections.reverse()[0]; } });
基本上你需要维护一个堆栈,以跟踪最后选择的项目。 我写了这个函数来更新我的堆栈。
var determineLastSelectedReportNumber = function (selectedReportNumbers, oldSelectedReportNumbers) { var newlyAddedReportNumbers = selectedReportNumbers.filter(function (n) { return oldSelectedReportNumbers.indexOf(n) == -1; }); var removedReportNumbers = oldSelectedReportNumbers.filter(function (n) { return selectedNumberArray.indexOf(n) == -1; }); //Remove the removed reportNumbers from the stack. if (removedReportNumbers.length > 0) { removedReportNumbers.forEach(function (removedReportNumber) { for (var i = 0; i < selectedNumbersStack.length; i++) { if (selectedNumbersStack[i].toString() === removedReportNumber.toString()) { selectedNumbersStack.splice(i, 1); break; } } }); } //Add the added reportnumbers to the stack. Push(); if (newlyAddedReportNumbers.length > 0) { selectedNumbersStack.push(newlyAddedReportNumbers); } //Set the last selected from top of the stack. Peek(); var lastSelectedReportNumber = ""; if(selectedNumbersStack.length > 0){ lastSelectedReportNumber = selectedNumbersStack[selectedNumbersStack.length -1]; } return lastSelectedReportNumber; }
这是我的onChange实现:
var reportNumberChanged = function () { var $reportNumber = $(this); var selectedNumber = $reportNumber.val(); oldSelectedNumberArray = selectedNumberArray; selectedNumberArray = jQuery.makeArray(selectedNumber); var lastSelectedReportNumber = determineLastSelectedReportNumber(selectedNumberArray, oldSelectedNumberArray); $("#TheLastSelectedReportNumber").val(lastSelectedReportNumber); resetDelayRetrieveReportInfo(); }
我不妨告诉你我的完整代码:
var selectedNumberArray = jQuery.makeArray($('#SelectedReportNumbers').val()); //Initial selectedNumbersStack. var selectedNumbersStack = selectedNumberArray; var counterInitialValue = 3; var counter = counterInitialValue; var counterInterval = -1; function delayRetrieveReportInfo() { counter--; if (counter === 0) { retrieveReportInfo($("#TheLastSelectedReportNumber").val()); clearInterval(counterInterval); } } function resetDelayRetrieveReportInfo() { clearInterval(counterInterval); //The previous interval is cancelled. counter = counterInitialValue; counterInterval = setInterval(function () { delayRetrieveReportInfo() }, 1000); }
这是多选的连接:
// Hookup function to change events of select lists $('#SelectedReportNumbers').change(reportNumberChanged);
您可以重复使用我的一些代码来创建自己的“lastSelected”实现。