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>