免费报名小程序_基于JavaScript完成下拉列表左右移

摘要: 根据JavaScript完成往下拉目录上下移动编码 本文关键详细介绍了根据JavaScript完成往下拉目录上下移动画特效果,编码简易易懂十分非常好,具备参照效仿使用价值,必须的朋友能够...

基于JavaScript实现下拉列表左右移动代码       这篇文章主要介绍了基于JavaScript实现下拉列表左右移动效果,代码简单易懂非常不错,具有参考借鉴价值,需要的朋友可以参考下

效果图如下所示:

代码如下所示:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 选择式下拉菜单 /title 
 script language="javascript" type="text/javascript" 
 function moveOption(e1, e2){ 
 try{ 
 for(var i=0;i e1.options.length;i++){ 
 if(e1.options[i].selected){ 
 var e = e1.options[i]; 
 e2.options.add(new Option(e.text, e.value)); 
 e1.remove(i); 
 ii=i-1; 
 document.form1.city.alue(document.form1.list2); 
 }catch(e){ 
 alue(geto){ 
 var allvalue = ""; 
 for(var i=0;i geto.options.length;i++){ 
 allvalue +=geto.options[i].value + ","; 
 return allvalue; 
 function changepos(obj,index) 
 if(index==-1){ 
 if (obj.selectedIndex 0){ 
 //obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) //swapNode方法只有IE才支持 
 obj.insertBefore(obj.options[obj.selectedIndex], obj.options[obj.selectedIndex - 1]); 
 }else if(index==1){ 
 if (obj.selectedIndex obj.options.length-1){ 
 //obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) //swapNode方法只有IE才支持 
 obj.insertBefore(obj.options[obj.selectedIndex + 1], obj.options[obj.selectedIndex]); 
 /script 
 style type="text/css" 
body { 
 font-size: 16px; 
 color: #003300; 
 /style 
 /head 
 body 
 form method="post" name="form1" action="" 
 table border="0" width="300" align="center" 
 td width="40%" select multiple name="list1" size="12" ondblclick="moveOption(document.form1.list1, document.form1.list2)" 
 option value="张三" 张三 /option 
 option value="李四" 李四 /option 
 option value="王五" 王五 /option 
 option value="赵六" 赵六 /option 
 option value="钱七" 钱七 /option 
 option value="软件" 软件 /option 
 option value="客服" 客服 /option 
 option value="硬件" 硬件 /option 
 option value="安全" 安全 /option 
 option value="会计" 会计 /option 
 option value="出纳" 出纳 /option 
 /select /td 
 td width="20%" align="center" input type="button" value="添加" / 
 br/ 
 br/ 
 input type="button" value="删除" / /td 
 td width="40%" select multiple name="list2" size="12" ondblclick="moveOption(document.form1.list2, document.form1.list1)" 
 /select /td 
 td input type="button" value="上移" / 
 br/ 
 br/ 
 input type="button" value="下移" / /td 
 /tr 
 /table 
 input type="text" name="city" size="40" / 
 /form 
 p align="center" 选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选), br / 
 或在选择项上双击进行添加和移除。 /p 
 /body 
 /html 

以上所述是小编给大家介绍的基于JavaScript实现下拉列表左右移动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503