js应用appendChild实现select动态增加选项、删除选项-网页编程网

当前位置：主页 >> JavaScript >> 正文

js应用appendChild实现select动态增加选项、删除选项

阅读：3354 输入：2021-10-31 11:19:44

共二种方法。

<!DOCTYPE html>
<html>
<body>
<select id="g" size="10" style="height:200px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

<select id="h" size="10" style="height:200px;">
</select>
<input type="button" value="测试" onclick="t()" />
<input type="button" value="测试1" onclick="t1()" />
<select id="s">
    <option>-请选择-</option>
    <option>1</option>
    <option>2</option>
</select>
<script>
//增加选项方法一：appendChild
function t(){
    var sltSrc=document.getElementById("g")
    var sltTarget=document.getElementById("h")
    while(sltSrc.options.length>0){
        sltTarget.appendChild(sltSrc.options[0])
    }
}
function t1(){
    var sltSrc=document.getElementById("h")
    var sltTarget=document.getElementById("g")
    while(sltSrc.options.length>0){
        sltTarget.appendChild(sltSrc.options[0])
    }
}
//增加选项方法二：add
var select = document.getElementById('s')// 根据ID获取select
var options = select.options// 获取目前的所有节点

//删除选项法一，删除选项：循环删除子节点，只保留第一个节点，因为内容是“-请选择-”之类的，所以没必要删除
for (var i = options.length - 1; i > 0; i--) {
   select.removeChild(options[i])
}
//删除选项法二，删除所有选项
//document.getElementById('s').options.length=0
select.add(new Option('文本（我是动态增加的）', 'value值'))// 新增节点
</script>
</body>
</html>

上一篇：js遍历对象的常用方法，解析json
下一篇：php数据库备份与恢复，生成sql语句

相关阅读: 超链接，点击后变内容，链接内容来回变更; form表单提交，前端验证总结; js实现焦点始终固定在文本框