javascript select标签的操作

用原生的方法对select标签的增删操作

1、选中某一个option，一般采用 option[i].selected  = true

2、添加option首先需要创建一个option的节点，然后插入到select，下面介绍了两种办法add(new Option)和document.createElement("option")

3、删除option节点，下面介绍三种方法removeChild()、或者直接设置节点为null或者采用remove的方法循环删除节点

 

<select id="select">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <button onclick="AddOption()">添加子项目</button>
    <button onclick="newOption()">添加子项目</button>
    <button onclick="onOption()">选中子项目</button>
    <button onclick="removeOption()">删除子项目</button>
    <button onclick="nulloption()">删除子项目</button>

    <select id="select1">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <button onclick="clearSelectboxMain()">删除子项目</button>

    <script>
        var i = document.getElementById("select");
        var j = document.getElementById("select1");
        function clearSelectboxMain() {
            clearSelectbox(j);
        }

        function onOption() { 
            i.options[1].selected = true; //选中第二个
        }

        //添加
        function AddOption() {
            i.add(new Option(3, 3), undefined); //添加选项,第二个参数为undefined是为了兼容IE和支持DOM的浏览器
        }
        
        function newOption() {
            var newOption = document.createElement("option");
            newOption.appendChild(document.createTextNode("4"));
            newOption.setAttribute("value", 4);
            i.appendChild(newOption);
        }


        //清除
        function removeOption() {
            i.removeChild(i.options[0]); //移除子项目的方法
        }

        function nulloption() { 
            i.options[2] = null; //将子项目设置为空
        }

        function clearSelectbox(selectbox) {
            for (var i = 0, len = selectbox.options.length; i < len; i++) {
                selectbox.remove(i);
            }
        }
    </script>