下拉 currentIndex onchange答案

【问题标题】：Dropdown currentIndex onchange下拉 currentIndex onchange
【发布时间】：2010-12-31 07:27:16
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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();

【讨论】：

+1：好主意。您可以使用对象而不是数组来处理多个选择元素。类似于vals = { select : [], select2 : [] }。
++1。假设它们并不总是一些已知的默认值，您需要在页面加载时为 vals 设置初始值。代替存储这些（或它们的哈希）的 JS 变量，您可以简单地将其存储为 SELECT 标记本身的扩展。
诚然，有些人确实对“expandos”有审美问题，但是如果按照 DOM 标准将它们保持为小写，那么在任何浏览器中使用它们都不会有问题。

【解决方案2】：

不，您需要自己将其保存在 js 变量中。

【讨论】：

【解决方案3】：

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

&lt;input type = "hidden" id = "previous" name = "previous"&gt;&lt;/input&gt;

使用 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;

【讨论】：