原生JS动态生成select

weixin_30469895

于 2019-06-01 10:24:00 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kukai/p/10958723.html

本文介绍了一种使用JavaScript动态生成HTML下拉菜单选项的方法。通过创建新的option元素，设置其属性并将其添加到select元素中，实现了下拉菜单的动态填充。此方法适用于需要根据数据源动态更新下拉菜单选项的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            var id=new Array(1,2,3);
            var value=new Array("北京","上海","天津");
            var select=document.getElementById("slt");
            select.options[0].selected=true;
            for(var i=0;i<id.length;i++){
                var option=document.createElement("option");
                option.setAttribute("value",id[i]);
                option.appendChild(document.createTextNode(value[i]));
                select.appendChild(option);
            }

        }
    </script>
</head>
<body>
<select id="slt">
    <option value="0"></option>
</select>
</body>
</html>