web前端网页左右分栏设计

2023-03-16 12:36| 来源: 网络整理| 查看: 265

web前端必学功法之一：左右移动

案例效果：

左右移动思路分析： 1.绑定事件：对应的按钮去绑定点击事件 2.获取选中项：获取指定下拉框被选中的选项 3.按钮类型：根据不同的按钮移动不同的选项移动一项：获取下拉框中被选中选项的第一个移动多项：获取下拉框被选中的选项移动全部：获取下拉框的选项 4.移动元素：使用appendChild()方法追加元素实现步骤： 1.获取对应的下拉框对象与下拉框中对应的选项 2.绑定指定按钮的点击事件 3.遍历下拉选项 4.判断是否被选中 5.将左侧被选中的下拉选项添加到数组中(push()); 6.将数组中的数组循环设置到右侧下拉框

a b c d e f g h i j k > >> >>> 这里用两种写法 js写法： // //获取对应的下拉框对象与下拉框的选项 var leftSelect = document.getElementById("left"); var leftItems = leftSelect.children; var rightSelect = document.getElementById("right"); var rightItems = rightSelect.children; //用来存放需要被移动的下拉选项 var selectedItems = []; // 将左侧下拉框中选中的选项的第一个移动到右侧 document.getElementById("toRight01").onclick = function () { //遍历左侧所有的下拉选项 for (var i = 0; i //将循环得到的第一个被选中的选项移动到了左右 rightSelect.appendChild(leftItems[i]); return; } } } // 将左侧下拉框中选中的选项移动到右侧 document.getElementById("toRight02").onclick = function () { //清空数组中的数据 selectedItems = []; //遍历左侧所有的下拉选项 for (var i = 0; i //将选中的选项添加到数组中 selectedItems.push(leftItems[i]); } } //将数组中的数据循环追加到右侧 for (var j = 0; j //清空数组中的数据 selectedItems = []; //遍历左侧所有的下拉选项 for (var i = 0; i rightSelect.appendChild(selectedItems[j]); } } jQuery写法： //jQuery写法 // 将左侧选中第一个选项移动到右侧 $("#toRight01").click(function(){ //得到左侧下拉框对象，得到左侧下拉框的下拉选项，得到被选中的选项，得到第一个 $("#left option:selected:eq(0)").appendTo($("#right")); }) // 将左侧选中选项移动到右侧 $("#toRight02").click(function(){ //得到左侧下拉框对象，得到左侧下拉框的下拉选项，得到被选的选项 $("#left option:selected").appendTo($("#right")); }) // 将左侧选项移动到右侧 $("#toRight03").click(function(){ //得到左侧下拉框对象，得到左侧下拉框的下拉选项，得到被选中的选项，得到第一个 $("#left option").appendTo($("#right")); }) 这里我只写了从左边移动到右边，右边移动到左边就以此类推。

【本文地址】

公司简介

联系我们