简单版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
//步骤：
//1.获取相关元素，并绑定事件
//2.获取子元素，整体的添加到另外一边的标签中
//1.获取相关元素，并绑定事件
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
inpArr[0].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel1.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel2.appendChild(arr[0]);
}
}
//同理
inpArr[1].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel2.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel1.appendChild(arr[0]);
}
}
//需求2：点击>和<两个按钮，所有被选定的子元素都跑到对方的标签中。
//思路：获取所有子节点，然后循环判断，只有selected属性值为true的选项才能被添加到右侧的select标签中
inpArr[2].onclick = function () {
//获取所有子节点
var arr = sel1.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel2.appendChild(arr[i]);
}
}
}
//同理
inpArr[3].onclick = function () {
//获取所有子节点
var arr = sel2.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel1.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
封装版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
inpArr[0].onclick = function () {
fn1(sel1,sel2);
}
inpArr[1].onclick = function () {
fn1(sel2,sel1);
}
inpArr[2].onclick = function () {
fn2(sel1,sel2);
}
inpArr[3].onclick = function () {
fn2(sel2,sel1);
}
//封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
function fn1(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
ele2.appendChild(arr[0]);
}
}
//把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
function fn2(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
arr[i].selected = false;
ele2.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
终极排序
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 150px;
height: 200px;
background-color: #7bff68;
}
</style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
<option value="0">1香蕉</option>
<option value="1">2苹果</option>
<option value="2">3大鸭梨</option>
<option value="3">4草莓</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select size="10" name="bbb" id="sel2" multiple="multiple">
</select>
<script>
//需求：点击按钮把对应的选中项移动到另一侧。
//技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
//如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//步骤：
//1.获取事件源和相关元素
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
inpArr[0].onclick = function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
}
//为第二个按钮绑定事件
inpArr[1].onclick = function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
}
inpArr[2].onclick = function () {
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel2.appendChild(optArr[i]);
}
}
//获取sel2中的子元素变成真数组，然后排序
var aaa = Array.from(sel2.children).sort(function (a,b) {
return a.value-b.value;
});
//删除素有子元素
for(var i=0;i<sel2.children.length;i++){
sel2.removeChild(sel2.children[i]);
}
//把排好序的数组添加到sel2中
for(var i=0;i<aaa.length;i++){
sel2.appendChild(aaa[i]);
}
}
inpArr[3].onclick = function () {
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel1.appendChild(optArr[i]);
}
}
var aaa = Array.from(sel1.children).sort(function (a,b) {
return a.value-b.value;
});
for(var i=0;i<sel1.children.length;i++){
sel1.removeChild(sel1.children[i]);
}
for(var i=0;i<aaa.length;i++){
sel1.appendChild(aaa[i]);
}
}
</script>
</body>
</html>
选择水果
网友评论