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>