使用html和js实现的一个简单小练习下拉列表移动。大概功能就是选中城市名,再点击按钮进行相应的移动。全左、全右则是选中全部的城市名进行移动。
依旧使用的是DOM2事件代理,详细的解释和代码步骤我都注释在下面的代码中的,请君一阅。
【注:仅作自己查看和分享学习之用】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表移动</title>
</head>
<style>
section{
display: flex;
align-items:center;
margin-bottom: 30px;
}
select{
width: 100px;
height: 200px;
}
select:nth-child(1){
margin-left: 300px;
margin-right: 30px;
}
option{
font-size: 20px;
}
div{
margin-right: 30px;
}
p{
margin: 0;
}
input{
font-size: 20px;
}
</style>
<body>
<article>
<section>
<select id="leftBox" multiple="multiple">
</select>
<div>
<p><input type="button" value="右移"></p>
<p><input type="button" value="左移"></p>
<p><input type="button" value="全右"></p>
<p><input type="button" value="全左"></p>
</div>
<select id="rightBox" multiple="multiple">
</select>
</section>
</article>
<script src="./lie.js"></script>
</body>
</html>
let artEle = document.getElementsByTagName("article")[0];
let secEle = document.querySelector("section");
//获取form里面的所有的input按钮
let inputEle = document.querySelectorAll("div input");
//原始选项数组
let optionArr = [
{ value: "成都" },
{ value: "山西" },
{ value: "九寨沟" },
{ value: "重庆" },
{ value: "河南" },
];
function render() {
let str = "";
optionArr.forEach((item) => {
str += `<option>${item.value}</option>`;
});
leftBox.innerHTML = str;
}
render();
//事件代理
secEle.addEventListener("click", function (e) {
let event = e || window.event;
switch (event.target.value) {
case "右移":
hasNode("#leftBox") ? moveNode("#leftBox", "#rightBox") : "";
break;
case "左移":
hasNode("#rightBox") ? moveNode("#rightBox", "#leftBox") : "";
break;
case "全右":
hasNode("#leftBox",true) ? moveNode("#leftBox", "#rightBox",true) : "";
break;
case "全左":
hasNode("#rightBox",true) ? moveNode("#rightBox", "#leftBox",true) : "";
break;
default:
break;
}
});
/**
* faNode获取移动节点的父元素
* targetNode,把节点移动到的父元素
* state判断是不是全部移动
*/
function moveNode(faNode, targetNode, state) {
let nodeA = document.querySelector(faNode);
let nodeB = document.querySelector(targetNode);
//判断是不是全部移动
//为true就是全部移动,就不需要进行筛选
if (state) {
[...nodeA.children].forEach(item => nodeB.appendChild(item));
} else {
[...nodeA.children].filter(item => item.selected).forEach(item => nodeB.appendChild(item));
[...nodeB.children]
}
}
//判断参数是否有子节点
/**
* node判断的节点
* state是不是全部移动
*/
function hasNode(node, state) {
let ele = document.querySelector(node);
//筛选出该select里面被选中的
let result = [...ele.children].filter(item => item.selected);
//如果该select里面的元素节点为空,就表明该select里面没有值,则提示无法移动
if (ele.children.length == 0) {
alert("没有可以移动的节点了!!!");
return false;
} else if (result.length == 0 && !state) {//如果result这个数组为空的时候,提示无法移动
alert("您还没有选择需要移动的元素!");
//返回一个false,则对应的事件代理里面就不执行了;
return false;
}
return true;
}