js案例之全选与下拉列表左右选择

<div id="select">
<input type="checkbox" id="box1" onclick="selectAllNo();"/>全选/全不选
<br>
<input type="checkbox" name="love"/>basketball
<input type="checkbox" name="love"/>baseball
<br>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="全不选" onclick="selectNo();"/>
<input type="button" value="反选" onclick="selectOther();"/>
</div>

<script type="text/javascript">
//全选
function selectAll(){
var input1 = document.getElementsByName("love");
for(var i = 0;i<input1.length;i++){
input1[i].checked = true;
}
}

4000
//全不选
function selectNo(){
var input1 = document.getElementsByName("love");
for(var i = 0;i<input1.length;i++){
input1[i].checked = false;
}
}
//反选
function selectOther(){
var input1 = document.getElementsByName("love");
for(var i = 0;i<input1.length;i++){
input1[i].checked = (!input1[i].checked);
}
}
//切换全选/全不选 复选框
function selectAllNo() {
var input1 = document.getElementById("box1");
if(input1.checked===true) {
selectAll();
}
else{
selectNo();
}
}
</script>

<select><option>1111</option></select>

1、获取select1里面的option（getElementByTagName）
2、得到select2
3、遍历option，判断option是否被选中
4、如果选中，使用appendChild把选择的添加到右边

1、获取select1里面的option
2、得到select2
3、遍历option使用appendChild方法添加到select2下面

<div style="display:inline-block;width:120px;">
<select id="select1" multiple="multiple" style="width:100px;height: 200px;">
<option>
1111
</option>
<option>
2222
</option>
<option>
3333
</option>
</select>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>

<div style="width:120px;display: inline-block">
<select id="select2" multiple="multiple" style="width:100px;height: 200px;">
<option>
4444
</option>
<option>
5555
</option>
<option>
6666
</option>
</select>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>

<script type="text/javascript">
function selToRight() {
//获取select1里面的option
var sel1 = document.getElementById("select1");
var opts = sel1.getElementsByTagName("option");
//判断是否被选中 如果是选中使用appendChild添加到右边去
var sel2 = document.getElementById("select2");
for(var i = 0;i<opts.length;i++){
if(opts[i].selected===true){
var opt = opts[i];
sel2.appendChild(opt);
i--;//appendChild让数组长度变短
}
}
}

function allToRight() {
//获取select1里面的option
var sel1 = document.getElementById("select1");
var opts = sel1.getElementsByTagName("option");
//使用appendChild添加到右边去
var sel2 = document.getElementById("select2");
var len = opts.length;
for(var i = 0;i<len;i++){
var opt = opts[0];
sel2.appendChild(opt);
}
}

function selToLeft() {
//获取select2里面的option
var sel2 = document.getElementById("select2");
var opts = sel2.getElementsByTagName("option");
//判断是否被选中 如果是选中使用appendChild添加到右边去
var sel1 = document.getElementById("select1");
for(var i = 0;i<opts.length;i++){
if(opts[i].selected===true){
var opt = opts[i];
sel1.appendChild(opt);
i--;//appendChild让数组长度变短
}
}
}

function allToLeft() {
//获取select2里面的option
var sel2 = document.getElementById("select2");
var opts = sel2.getElementsByTagName("option");
//判断是否被选中 如果是选中使用appendChild添加到右边去
var sel1 = document.getElementById("select1");
var len = opts.length;
for(var i = 0;i<len;i++){
var opt = opts[0];
sel1.appendChild(opt);
}

}
</script>