javascript实现选择框选项的移动
实现效果:
未移动前
移动后
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">function move(strlist1,strlist2){var list1=document.getElementById(strlist1);var list2=document.getElementById(strlist2);if(list1.length!=0){var selected=0;for(i=0;i<list1.length;i++){//alert(list1.children[i]);if(list1.children[i].selected){selected=i;//alert(i);}}//alert(selected);list2.appendChild(list1.children[selected]);}}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><form method="get" action=""><br /><div style="position:absolute; top: 16px; left: 12px;"><select name="selectList1" id="selectList1" size="10"><option value="1">11</option><option value="2">12</option><option value="3">13</option><option value="4">14</option><option value="5">15</option></select></div><div style="position:absolute; left: 81px; top: 59px;"><input type="button" value=">>" onclick="move('selectList1','selectList2')"/><br/><input type="button" value="<<" onclick="move('selectList2','selectList1')"/></div><div style="position:absolute; left: 131px; top: 18px;"><select name="selectList2" id="selectList2" size="10"><option value="1">21</option><option value="2">22</option><option value="3">23</option><option value="4">24</option><option value="5">25</option></select></div><br/></form></body></html>?
?