如何使用 JavaScript 从选项 DOM 元素中获取先前和新的选定值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4315727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get previous and new selected value from a option DOM element with JavaScript?
提问by Thomas Zuberbühler
How can I retrieve the new selected value and the previous selected value with JavaScript when onChange or similar event is called?
调用 onChange 或类似事件时，如何使用 JavaScript 检索新的选定值和先前选定的值？
<select size="1" id="x" onchange="doSomething()">
<option value="47">Value 47</option>
...
function doSomething() {
var oldValue = null; // how to get the old value?
var newValue = document.getElementById('x').selected.value;
// ...
Thank you! :)
谢谢！:)
采纳答案by T.J. Crowder
Using straight JavaScript and DOM, something like this (live example):
直接使用 JavaScript 和 DOM，就像这样（现场示例）：
var box, oldValue;
// Get a reference to the select box's DOM element.
// This can be any of several ways; below I'll look
// it up by ID.
box = document.getElementById('theSelect');
if (box.addEventListener) {
// DOM2 standard
box.addEventListener("change", changeHandler, false);
}
else if (box.attachEvent) {
// IE fallback
box.attachEvent("onchange", changeHandler);
}
else {
// DOM0 fallback
box.onchange = changeHandler;
}
// Our handler
function changeHandler(event) {
var index, newValue;
// Get the current index
index = this.selectedIndex;
if (index >= 0 && this.options.length > index) {
// Get the new value
newValue = this.options[index].value;
}
// **Your code here**: old value is `oldValue`, new value is `newValue`
// Note that `newValue`` may well be undefined
display("Old value: " + oldValue);
display("New value: " + newValue);
// When done processing the change, remember the old value
oldValue = newValue;
}
(I'm assuming all of the above is inside a function, like a page load function or similar, as in the live example, so we're not creating unnecessary global symbols [box, oldValue, 'changeHandler`].)
（我假设以上所有内容都在一个函数内，比如页面加载函数或类似的，就像在现场示例中一样，所以我们不会创建不必要的全局符号 [ box, oldValue, 'changeHandler`]。）
Note that the changeevent is raised by different browsers at different times. Some browsers raise the event when the selection changes, others wait until focus leaves the select box.
请注意，该change事件由不同的浏览器在不同的时间引发。某些浏览器在选择更改时引发事件，其他浏览器会等到焦点离开选择框。
But you might consider using a library like jQuery, Prototype, YUI, Closure, or any of several others, as they make a lot of this stuff a lot easier.
但是您可能会考虑使用像jQuery、Prototype、YUI、Closure或其他几个库这样的库，因为它们使很多这些东西变得更加容易。
回答by Harvey
Look here: Getting value of select (dropdown) before changeI think the better,
看这里：在更改之前获取选择（下拉）的值我认为更好，
(function () {
var previous;
$("select").focus(function () {
// Store the current value on focus, before it changes
previous = this.value;
}).change(function() {
// Do something with the previous value after the change
alert(previous);
});
})();
回答by Saumitra Roy
The following code snippet may help
以下代码片段可能会有所帮助
<html>
<script type="text/javascript">
this.previousVal;
function changeHandler(selectBox)
{
alert('Previous Val-->'+selectBox.options[this.previousVal].innerHTML)
alert('New Val-->'+selectBox.options[selectBox.selectedIndex].innerHTML)
this.previousVal=selectBox.selectedIndex;
}
</script>
<body>
<select id="selectBox" onchange="changeHandler(this)">
<option>Sunday</option><option>Monday</option>
<option>Tuesday</option><option>Wednesday</option>
</select>
<script type="text/javascript">
var selectBox=document.getElementById("selectBox")
this.previousVal=selectBox.selectedIndex
</script>
<body>
</html>
回答by Dev
Below worked for me. Add below two events to you select HTML tag:-
下面为我工作。将以下两个事件添加到您选择的 HTML 标签中：-
onFocus='this.oldValue = this.value'; //if required in your case add this line to other events like onKeyPressDown and onClick.
onChange = 'alert(this.oldValue); this.value=this.oldValue'
