使用Javascript实现选择下拉菜单互移并排序
更新时间:2016年2月26日 10:04 点击:2088
本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码。
代码如下:
<html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="width:100px; height:200px" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.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> <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> <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> <option value="台湾">台湾</option> <option value="其他">其他</option> </select> </td> <td width="20%" align="center"> <input type="button" value=">>" onclick="moveOption(document.myform.list1, document.myform.list2)"><br /> <br /> <input type="button" value="<<" onclick="moveOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(list2,-1)" type="button"> ∧</button> <br /> <button onclick="changepos(list2,1)" type="button"> ∨</button> </td> </tr> </table> 值:<input type="text" name="city" size="40"> </form> <script language="JavaScript"> function moveOption(e1, e2) { try { for (var i = 0; i < e1.options.length; i++) { var e = e1.options[i]; if (e1.options[i].selected&& OptionExists(e2, e.value)) { e2.options.add(new Option(e.text, e.value)); e1.remove(i); i = i - 1 } } document.myform.city.value = getvalue(document.myform.list2); } catch (e) { } } function getvalue(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)) } } else if (index == 1) { if (obj.selectedIndex < obj.options.length - 1) { obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1)) } } } //查询是否已经存在 function OptionExists(list, optValue) { var find = true; for (i = 0; i < list.options.length; i++) { if (list.options[i].value == optValue) { find = false; break; } } return find; } </script> </body> </html>
关于以上代码实现使用Javascript实现选择下拉菜单互移并排序的相关内容大家还很满意吧,代码有问题欢迎提出,我会及时和大家取得联系的!
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06