Js动态添加select的option选项的代码

发布时间:2020-05-09编辑:脚本学堂
本文介绍下,如何用js实现动态添加select中option选项,举一个简单的例子,帮助大家理解。有需要的朋友参考下吧。

代码如下:
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>动态添加select的option_脚本学堂_www.jb200.com</title>
</head>
<body>
    <select id="Select">
    </select>
    <input id="Button" type="button" value="button" onclick="javascript:buileselect();" />

    <script type="text/javascript" language="javascript">
    function buileselect()
    {
        var info = "1_123|2_123|3_123";
        var infoarray = info.split("|");
        var count = infoarray.length;

        var select = document.getElementById("Select");

        for(var i = 0; i < count; i++)
        {
            var id = infoarray[i].split("_")[0];
            var name = infoarray[i].split("_")[1];
            select.options.add(new Option(name, id));
        }
    }
    </script>
</body>
</html>

>>> 您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
JavaScript 移除option选项的方法
JavaScript 选择option选项的方法
JavaScript 添加option选项的方法
js 添加、修改、删除select中option元素的实现代码
js动态添加与删除 select option的代码
javasript 操作select中option的常用方法
js获取select下拉标签中option的属性值
js删除select下拉列表框中option选项的多种方法(附代码)
js移动(增加删除)select option的实现代码
js 控制select下拉列表框中option选项的上下移动
javascript操作Select options集合的实例介绍
JS动态添加与删除option选项的代码
js页面跳转 option location页面跳转的代码实例