JavaScript监听select下拉框变化并实现鼠标操作恢复选项
教程简介
在前端开发中，select下拉框是比较常见的表单控件。除了监听用户选择的选项之外，有些页面还需要在鼠标操作过程中记录当前选项，并在没有完成选择时恢复之前的状态。
本文由我的站长站整理，结合一个完整的HTML示例，介绍如何使用JavaScript监听select变化事件，并实现记录当前选中项、临时取消选中以及恢复原选项的效果。
教程主要内容
一、创建HTML下拉选择框
首先创建一个select元素，并设置三个option选项，同时通过id方便JavaScript获取该元素：
<select id="u18"> <option value="1">xxxxxxxx1</option> <option value="2">xxxxxxxx2</option> <option value="3">xxxxxxxx3</option> </select>
这里将select的id设置为u18，后续脚本可以通过document.getElementById()获取这个下拉框。
二、监听select选项变化
获取select元素之后，可以使用addEventListener()监听change事件。当用户选择其他选项时，就会执行对应的函数：
var id = document.getElementById("u18");
id.addEventListener('change', function() {
alert(this.value);
});代码中的this.value表示当前select选中的option的value值。例如选择第二个选项时，获取到的结果就是2。
三、记录select当前选中的索引
如果需要在后续操作中恢复之前的选项，可以先保存当前选项对应的索引：
id.onmousedown = function() {
this.sindex = this.selectedIndex;
this.selectedIndex = -1;
};selectedIndex表示当前选中option的索引位置。需要注意的是，索引从0开始，因此第一个选项的索引为0，第二个选项为1。
示例中的sindex是自定义属性，用于暂时保存操作前的选中索引。
四、鼠标移开后恢复原来的选项
接下来监听鼠标移出select的事件。如果当前没有选中项，则恢复之前保存的索引：
id.onmouseout = function() {
var index = id.selectedIndex;
if (index == -1) {
this.selectedIndex = this.sindex;
}
};这样，当select处于没有选中项的状态并且鼠标离开控件时，就会重新选择之前保存的option。
五、完整JavaScript示例
将以上代码组合后，可以得到完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>Select下拉框事件示例</title>
</head>
<body>
<select id="u18">
<option value="1">xxxxxxxx1</option>
<option value="2">xxxxxxxx2</option>
<option value="3">xxxxxxxx3</option>
</select>
<script type="text/javascript">
var id = document.getElementById("u18");
// 监听下拉框选项变化
id.addEventListener('change', function() {
alert(this.value);
});
// 鼠标按下时保存当前选项
id.onmousedown = function() {
this.sindex = this.selectedIndex;
this.selectedIndex = -1;
};
// 鼠标移出时恢复之前的选项
id.onmouseout = function() {
var index = this.selectedIndex;
if (index == -1) {
this.selectedIndex = this.sindex;
}
};
</script>
</body>
</html>六、原代码中的一个细节需要修正
原示例中出现了thisthis.sindex和thisthis.selectedIndex这样的写法，这属于JavaScript语法错误。实际使用时应该分别修改为：
this.sindex = this.selectedIndex; this.selectedIndex = this.sindex;
否则浏览器执行脚本时会产生JavaScript错误，后面的事件逻辑也可能无法正常执行。
其他说明
如果只是希望获取select当前选中的值，通常只需要监听change事件即可，不需要额外修改selectedIndex。只有在需要实现特殊的鼠标交互效果时，才有必要记录并恢复之前的选项。
对于现代前端项目，也可以优先使用addEventListener()统一注册事件，减少直接覆盖onmousedown、onmouseout等事件属性带来的维护问题。
本文示例主要用于说明JavaScript与HTML select元素之间的事件交互关系。实际项目中可以根据页面需求进一步增加表单校验、选项切换、数据加载等处理逻辑。
以上内容由我的站长站整理，适合作为JavaScript下拉框事件、select选项操作以及前端表单交互开发的参考示例。