基于html+js实现简易下拉列表移动

未休95

已于 2022-11-15 09:27:32 修改

阅读量1.2k

点赞数

分类专栏： HTML JavaScript 文章标签： javascript html 前端

于 2022-11-15 09:24:59 首次发布

本文链接：https://blog.csdn.net/m0_71734538/article/details/127859355

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 3 订阅

订阅专栏

HTML

10 篇文章 1 订阅

订阅专栏

使用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;
}