9月23日JavaScript作业----两个列表之间移动数据

作业一：两个列表之间数据从一个列表移动到另一个列表

<div style="width:600px; height:500px; margin-top:20px">
　　<div style="width:200px; height:300px; float:left">
　　　　<select id="list1" size="10" style="width:200px; height:300px">
　　　　　　<option>山东</option>
　　　　　　<option>北京</option>
　　　　　　<option>河北</option>
　　　　　　<option>黑龙江</option>
　　　　　　<option>河南</option>
　　　　</select>
　　</div>
　　<div style="width:80px; height:300px; float:left">
　　　　<input type="button" value="单移" id="btn1" style="width:70px; height:30px" onclick="Dan()"/>
　　　　<input type="button" value="全移" id="btn2" style="width:70px; height:30px" onclick="Duo()"/>
　　</div>
　　<div style="width:200px; height:300px; float:left">
　　　　<select id="list2" size="10" style="width:200px; height:300px"></select>
　　</div>
</div>

function Dan()
{
　　var list1 = document.getElementById("list1");  //把列表1选中值取出
　　var v = list1.value;
　　var s = "<option class='o2'>"+v+"</option>";  //造一个option项
　　var attr = document.getElementsByClassName("o2");  //把造的option项放在一个数组里面。
　　var cz = true;//默认是true
　　for(var i=0;i<attr.length;i++)
　　{
　　　　if(attr[i].innerHTML==v)  //判断右侧列表里是否有重复的
　　　　{
　　　　　　cz = false;
　　　　　　break;
　　　　}
　　}

　　if(cz)
　　{
　　　　var list2 = document.getElementById("list2"); // 将option项扔到list2
　　　　list2.innerHTML +=s;//在列表2添加上
　　}
}
function Duo()
{
　　document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML; 直接复制列表选项
}