首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript兑现选择框选项的移动

2012-10-06 
javascript实现选择框选项的移动实现效果: 未移动前移动后?!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

javascript实现选择框选项的移动



实现效果:

未移动前
javascript兑现选择框选项的移动

移动后
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>

?

?

热点排行
Bad Request.