正文
javascript--select标签的添加删除功能的使用
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
在网页开发中,常常遇见这种问题,给定两个框,A和B,和几个图片按钮,A中存在几个操作,点击图片按钮,填加至B中,或者从B中移除等,这种效果如何实现,本文加以总结。
几种效果图如下:
原始图: 添加全部功能图: 移除全部功能图:
添加选中功能图:
移除选中功能图:
实现思路:
1、首先要做出这种效果图,借助的标签的select标签,select标签设置高度,同时设置该标签的 multiple 属性----------> multiple="multiple", 该属性两个作用,①显示全部的信息②允许多选
2、给各个按钮注册点击事件,
3、添加全部功能
在点击事件中,利用 element.children 获得 第一个select标签 中所有元素 option ,遍历所有的元素option,利用 element.appendChild() 方法,将遍历到的 option添加至第二个select ,需要注意的是,element.appendChild()会将待插入的元素从原位置移除,插入到新位置,这样会伴随原select中元素的索引变化,导致功能添加有遗漏,需要注意,代码中已经添加了解决办法,可以每次都获取第一个元素option添加,或者每次在for循环内让i--
4、移除全部功能
原理与3类似,不做赘述
5、添加选中功能
在点击事件中,遍历第一个select中的元素, 创建临时数组, 如果select元素被选中,则被 push() 进临时数组中,再遍历临时数组,利用element.appendChild()将元素添加至第二个select中。这样利用数组目的是为了让选中项不至于倒序。
6、移除选中功能
原理与5类似,不做赘述
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>功能框的移出与添加</title> <!-- 给两个下拉框添加样式 -->
<style type="text/css">
select{
height: 200px;
width: 150px;
}
</style>
</head>
<body>
<!-- 定义所有功能框 -->
<select id="allFuntionBox" multiple="multiple">
<option value ="0">关羽</option>
<option value ="1">张飞</option>
<option value ="2">赵云</option>
<option value ="3">马超</option>
<option value ="4">黄忠</option>
<option value ="5">魏延</option>
<option value ="6">严颜</option>
<option value ="7">关平</option>
<option value ="8">周仓</option>
</select>
<!-- 定义需要功能框 -->
<select id="CheckFuntionBox" multiple="multiple">
</select> <br/><br/> <input type="button" id="btn_addAll" value="添加全部功能" />
<input type="button" id="btn_addChecked" value="添加选中功能" />
<input type="button" id="btn_RemoveAll" value="移除所有功能" />
<input type="button" id="btn_RemoveChecked" value="移除选中功能" /> <!-- 插入JS代码 -->
<script type="text/javascript">
// 准备工作
// 获取两个select标签以及四个按钮
var allFuntionBox=document.getElementById('allFuntionBox');
var CheckFuntionBox=document.getElementById('CheckFuntionBox');
var btn_addAll=document.getElementById('btn_addAll');
var btn_addChecked=document.getElementById('btn_addChecked');
var btn_RemoveAll=document.getElementById('btn_RemoveAll');
var btn_RemoveChecked=document.getElementById('btn_RemoveChecked'); //1.添加全部功能按钮
btn_addAll.onclick=function(){
for(var i=0;i<allFuntionBox.children.length;){
var option=allFuntionBox.children[i];
CheckFuntionBox.appendChild(option);
}
} //2.移除全部功能
btn_RemoveAll.onclick=function(){
for(var i=0;i<CheckFuntionBox.children.length;){
var option=CheckFuntionBox.children[i];
allFuntionBox.appendChild(option);
}
} //3.添加选中功能
btn_addChecked.onclick=function(){
var temp=[];//定义数组,存放选中的项目
for(var i=0;i<allFuntionBox.children.length;i++){
var option=allFuntionBox.children[i];
if(option.selected){
temp.push(option);
option.selected=false;
}
}
for(var i=0;i<temp.length;i++){
CheckFuntionBox.appendChild(temp[i]);
}
} //4.移除选中功能
btn_RemoveChecked.onclick=function(){
var temp=[];
for(var i=0;i<CheckFuntionBox.children.length;i++){
var option=CheckFuntionBox.children[i];
if(option.selected){
temp.push(option);
option.selected=false;
}
}
for(var i=0;i<temp.length;i++){
allFuntionBox.appendChild(temp[i]);
}
}
</script>
</body>
</html>