下拉当前索引 onchange

Question

有一个包含 5 个选项的下拉菜单。当前，选择了选项 2。用户现在选择了选项 4。onchange 事件被触发，该事件被 JS 函数捕获，监听选择上的 onchange。

在 JS 函数中，我可以使用 selectedIndex 属性轻松检查用户选择的选项的索引。但是，我还想知道用户更改它的原始值是什么。

是否存在持续存在的属性 基本上是原始值，即 在这种情况下选择 2。

Answer 1

作为一个概念，我将以下内容放在一起 - 很可能有更好的方法来做到这一点：

var vals = [];

document.getElementById("colors").onchange = function(){
   vals.unshift(this.selectedIndex);
};

function getPrevious(){
  alert(vals[1]); // you'll need more logic here
                  // this is purposefully simplistic
}

--

<select id="colors">
   <option>Red</option>
   <option>Green</option>
   <option>Blue</option>
</select>

封闭示例：

我试图将这一切与实际的下拉元素本身联系起来。老实说，这是我第一次向下拉菜单本身添加功能，所以我不能保证这不会产生后果：

   var colors = document.getElementById("colors");
       colors.vals = [];
       colors.setPrevious = function() { this.vals.unshift(this.selectedIndex); }
       colors.getPrevious = function() { return this.vals[1]; }
       colors.onchange    = function() { this.setPrevious(); this.getPrevious(); }
       // set initial state
       colors.setPrevious();

Answer 2

不，您需要将其保留在 js 变量中。

Answer 3

正如 dl 所说，您可以使用简单的隐藏变量来保存值。我们可以在隐藏变量中设置当前值。

<input type = "hidden" id = "previous" name = "previous"></input>

使用 onfocus="setPrevious(this.id)" 设置当前值

JS

function setPrevious(id) {
	document.getElementById("previous").value = document.getElementById(id).selectedIndex ;
}

使用 Onchange() 检查确认按钮输出并设置“前一个”值

document.getElementById(id).selectedIndex = document.getElementById("previous").value;