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

使用html和js实现的一个简单小练习下拉列表移动。大概功能就是选中城市名，再点击按钮进行相应的移动。全左、全右则是选中全部的城市名进行移动。

依旧使用的是DOM2事件代理，详细的解释和代码步骤我都注释在下面的代码中的，请君一阅。

【注：仅作自己查看和分享学习之用】

 

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 += `${item.value}`;
    });
    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;
}