用JS动态添加select的option

最新推荐文章于 2025-10-28 11:51:38 发布

原创最新推荐文章于 2025-10-28 11:51:38 发布 · 9.4k 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用JavaScript动态地为HTML中的Select元素添加Option选项，并获取选中值及属性。同时，还介绍了如何为Select元素添加onChange事件以实现交互功能。

//用JS动态添加select的option
var op=document.createElement("option");      // 新建OPTION (op) 
op.setAttribute("value",0);          		// 设置OPTION的 VALUE 
op.setAttribute("OhterAttr",123);                   // 设置扩展属性，用于验证
op.appendChild(document.createTextNode("选择我")); // 设置OPTION的 TEXT
document.getElementById("SelectID").appendChild(op);           // 为SELECT 新建一 OPTION(op)


//用js获取select的选中值和选中项的属性
var myselect=document.getElementById("SelectID");
var index=myselect.selectedIndex ; 
var selectValue=myselect.options[index].value;
myselect.options[index].getAttribute("OhterAttr")

//动态为select 添加onChange实践
var myselect=$('#<span style="font-family: Arial, Helvetica, sans-serif;">SelectID</span><span style="font-family: Arial, Helvetica, sans-serif;">');</span>
//ie8写法
myselect.attachEvent('onchange',
function(){
<span style="white-space:pre">	</span>alert(1); 
}
);


//chrome写法
myselect.addEventListener('change',
function(){
<span style="white-space:pre">	</span><span style="font-family: Arial, Helvetica, sans-serif;">alert(1); </span><span style="white-space:pre">
</span>}
);