标签：val 添加 append 方法 inpu log nts 也会 长度
单个添加的操作
1、得到select里面的option
-getElementsByTagName（）返回是数组
-遍历数组，得到每一个option
2、判断option是否被选中
-属性：selected 如果选中 selected=true 没有选中就是false
3、如果选中，把选中的添加
-得到select
-添加到选择的部分 appendChild方法
全部选中添加的操作
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select
5、添加到select2下面 appendChild方法、
代码
<html>
<head>
<title>Html示例</title>
<style type="text/css">
</style>
</head>
<body>
<div style="float:left"> //把第一个下拉列表弄在左边 <style> 标签用于为 HTML 文档定义样式信息。
<div>
<select id="select1" multiple ="multiple" style="width:100px; height:100px"> //multiple 允许在下拉列表中进行多选
<option> AAAAAA</option>
<option> BBBBBB</option>
<option> CCCCCC</option>
<option> DDDDDD</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selectright()"/> <br/>
<input type="button" value="全部添加到右边" onclick="allright()"/>
</div>
</div>
<div id ="right" >
<div>
<select id="select2" multiple ="multiple" style="width:100px;height:100px">
<option> QQQQQQ</option>
<option> KKKKKK</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selectleft()"/><br/>
<input type="button" value="全部添加到左边" onclick="allleft()"/>
</div>
</div>
<script type ="text/javascript">
//选中添加到右边的操作
function selectright() {
var select1 =document.getElementById("select1");
var select2=document.getElementById("select2");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++) {
var option1=options1[i];
if(option1.selected==true) {
select2.appendChild(option1);
i--; //因为是数组，每次循环数组长度为减1，但是i的长度也会变，最后会出现只能移动几个的现象，而不能全部移动完
}
}
}
//全部添加到右边的操作
function allright() {
var select1 =document.getElementById("select1");
var select2=document.getElementById("select2");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++) {
var option1=options1[i];
select2.appendChild(option1);
i--;
}
}
//选中添加到左边的操作
function selectleft() {
var select2 =document.getElementById("select2");
var select1=document.getElementById("select1");
var options2 =select2.getElementsByTagName("option");
for(var i=0;i<options2.length;i++) {
var option2 =options2[i];
if(option2.selected==true) {
select1.appendChild(option2);
i--;
}
}
}
//全部添加到左边的操作
function allleft() {
var select2= document.getElementById("select2");
var select1= document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var i=0;i<options2.length;i++) {
var option2 =options2[i];
select1.appendChild(option2);
i--;
}
}
</script>
</body>
</html>
结果显示
标签：val 添加 append 方法 inpu log nts 也会 长度
原文地址：http://www.cnblogs.com/zengjiao/p/7183882.html
