JavaScript代码实现选⽔果选⽔果类似于我们在购物商城⾥进⾏简单选择。
包含⼀种或多种。然后把它放到类似购物车⾥去。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select {
width: 150px;
height: 200px;
background-color: #0099cc;
}
</style>
</head>
<body>
<select id="all" size="10" multiple="multiple">
网页购物车代码
<option>苹果</option>
<option>⾹蕉</option>
<option>西⽠</option>
<option>⽜油果</option>
<option>西红柿</option>
</select>
<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">
<select id="select" size="10" multiple="multiple">
</select>
<script>
function $(id) {
ElementById(id);
}
$("btn1").onclick = function() {
//  全部右移思路遍历左边所有的孩⼦⼀⼀加到右边
var lChilds = $("all").children;
for(var i=lChilds.length-1; i>=0; i--) {
$("select").appendChild(lChilds[i]);
}
}
$("btn2").onclick = function() {
//  全部右移思路遍历右边所有的孩⼦⼀⼀加到左边
var rChilds = $("select").children;
for(var i=rChilds.length-1; i>=0; i--) {
$("all").appendChild(rChilds[i]);
}
}
$("btn3").onclick = function() {
//  选中右移
var lChilds = $("all").children;
/* for(var i=0; i<lChilds.length; i++) {
if(lChilds[i].selected) {
$("select").appendChild(lChilds[i]);
i--;
}
}*/
for(var i=lChilds.length -1; i>=0; i--) {
if(lChilds[i].selected) {
$("select").appendChild(lChilds[i]);
}
}
/*
i=0 i<5  iChilds[0] 右边加了苹果现在左边剩4个⽔果 [⾹蕉西⽠⽜西红柿]                  i=1 1<4  iChilds[1] 西⽠
...
*/
}
</script>
</body>
</html>