用原生的方法对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 οnclick="AddOption()">添加子项目</button> <button οnclick="newOption()">添加子项目</button> <button οnclick="onOption()">选中子项目</button> <button οnclick="removeOption()">删除子项目</button> <button οnclick="nulloption()">删除子项目</button> <select id="select1"> <option value="1">1</option> <option value="2">2</option> </select> <button οnclick="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>
转载于:https://blog.51cto.com/zhanglida66/1917998