欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

js动态添加,删除option及add的使用方法

发布时间：2025/4/9 编程问答 25 豆豆
生活随笔 收集整理的这篇文章主要介绍了 js动态添加,删除option及add的使用方法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态建立select及option及add的使用</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //1.创建select
        function createSelect(){
            var mySelect = document.createElement("select");
            mySelect.id = "mySelect";
            document.body.appendChild(mySelect);
        }
        createSelect();
        //2.创建option
        function addOption(){
            //根据id查找对象，
            var obj=document.getElementById('mySelect');
            //添加一个选项
            //方法一：
            obj.add(new Option("文本text1","value值"));
            //或方法二：
            obj.options.add(new Option("文本text2","value值"));
        }
        addOption();
        
//        3.删除所有选项option     
        function removeAll(){
            var obj=document.getElementById('mySelect');
            obj.options.length=0;
        }
//        removeAll();    

//        4.删除一个选项option
        function removeOne(){
            var obj=document.getElementById('mySelect');
            //index,要删除选项的序号，这里取当前选中选项的序号
            var index=obj.selectedIndex;
            console.log(index)
            obj.options.remove(index);
        }
        removeOne();

//        5.获得选项option的值
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号，取当前选中选项的序号
        var val = obj.options[index].value;
        console.log(val)
//        6.获得选项option的文本
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号，取当前选中选项的序号
        var val2 = obj.options[index].text;

//        7.7.修改选项option
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号，取当前选中选项的序号
        var val3 = obj.options[index]=new Option("新文本","新值");
//        8.删除select
        function removeSelect(){
            var mySelect = document.getElementById("mySelect");
            mySelect.parentNode.removeChild(mySelect);
        }
            
    </script>
</html>

转载于:https://www.cnblogs.com/gshufan/p/6171129.html

总结

以上是生活随笔为你收集整理的js动态添加,删除option及add的使用方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。