本文总结了JavaScript中Select下拉框的两种常见应用场景。首先介绍如何利用onchange事件获取用户选中的文本值；其次针对前后端交互需求，讲解如何通过动态创建Option并绑定自定义属性（如dataid），在触发事件时获取特定标识符（如ID）以优化数据传输。
Select下拉框获取选中值与自定义属性传参
本文汇总了开发项目中涉及Select下拉框的常见问题。问题一：如何获取Select下拉框中Option的选中值？主要涉及onchange()方法，该方法用于触发选择框内容改变的事件。
具体实现代码如下：
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<select onchange="test(event)">
<option>安静</option>
<option>晴天</option>
<option>七里香</option>
</select>
<script type="text/javascript">
function test (e) {
var e = event ? event : window.event;
alert(e.target.value);
}
</script>
</body>
</html>
问题二：在实际开发中，选择内容往往仅用于前端展示，核心需求是与后台进行数据交互。为了减少HTTP数据传输量，通常传递ID等标识符。由于开发中Option多为动态创建，我们需要为动态生成的Option添加自定义属性，并探讨如何获取这些自定义属性。
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<select onchange="test(event)" id="sel"></select>
<script type="text/javascript">
//定义内容的json数据，一般从后台获取
var data = [
{
name: '晴天',
id: '1'
},
{
name: '安静',
id: '2'
},
{
name: '七里香',
id: '3'
}
];
createOption('sel',data);
//创建option
function createOption(parentId, data){
var parentId = document.getElementById(parentId);
for(var i=0; i<data.length; i++){
var opt = document.createElement('option');
//设置option的值
opt.innerHTML = data[i].name;
//定义option的自定义值
opt.setAttribute('dataid', data[i].id);
parentId.appendChild(opt);
}
}
//选取自定义属性的方法
function test (e) {
var e = event ? event : window.event;
var target = e.target;
var index = target.selectedIndex;
alert("我的id="+target[index].getAttribute('dataid'));
}
</script>
</body>
</html>
运行结果如下图所示：
若需进一步深入学习，可参考jQuery下拉框效果汇总或JavaScript下拉框效果汇总。
以上为开发中遇到的典型问题及解决方案，希望对读者的学习有所帮助。