当前位置:Gxlcms > JavaScript > JS做出左右边列表相互移动效果

JS做出左右边列表相互移动效果

时间:2021-07-01 10:21:17 帮助过:16人阅读

这次给大家带来JS做出左右边列表相互移动效果,JS做出左右边列表相互移动的注意事项有哪些,下面就是实战案例,一起来看一下。

实现功能:

1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除;

2.支持列表中项目上下位置的移动;

3.效果图如下:

Html代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>选择下拉菜单</TITLE>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <META NAME="Description" CONTENT="Power by hill">
  6. </HEAD>
  7. <BODY>
  8. <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
  9. <form method="post" name="myform">
  10. <table border="0" width="300">
  11. <tr>
  12. <td width="40%">
  13. <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
  14. <option value="北京">北京</option>
  15. <option value="上海">上海</option>
  16. <option value="山东">山东</option>
  17. <option value="安徽">安徽</option>
  18. <option value="重庆">重庆</option>
  19. <option value="福建">福建</option>
  20. <option value="甘肃">甘肃</option>
  21. <option value="广东">广东</option>
  22. <option value="广西">广西</option>
  23. <option value="贵州">贵州</option>
  24. <option value="海南">海南</option>
  25. <option value="河北">河北</option>
  26. <option value="黑龙江">黑龙江</option>
  27. </select>
  28. </td>
  29. <td width="20%" align="center">
  30. <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
  31. <br/>
  32. <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
  33. </td>
  34. <td width="40%">
  35. <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
  36. </select>
  37. </td>
  38. <td>
  39. <button onclick="changepos(list2,-1)" type="button">上移</button>
  40. <br/>
  41. <button onclick="changepos(list2,1)" type="button">下移</button>
  42. </td>
  43. </tr>
  44. </table>
  45. 值:<input type="text" name="city" size="40">
  46. </form>
  47. <script language="JavaScript">
  48. <!--
  49. function moveOption(e1, e2){
  50. try{
  51. for(var i=0;i<e1.options.length;i++){
  52. if(e1.options[i].selected){
  53. var e = e1.options[i];
  54. e2.options.add(new Option(e.text, e.value));
  55. e1.remove(i);
  56. ii=i-1
  57. }
  58. }
  59. document.myform.city.value=getvalue(document.myform.list2);
  60. }
  61. catch(e){}
  62. }
  63. function getvalue(geto){
  64. var allvalue = "";
  65. for(var i=0;i<geto.options.length;i++){
  66. allvalue +=geto.options[i].value + ",";
  67. }
  68. return allvalue;
  69. }
  70. function changepos(obj,index)
  71. {
  72. if(index==-1){
  73. if (obj.selectedIndex>0){
  74. obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
  75. }
  76. }
  77. else if(index==1){
  78. if (obj.selectedIndex<obj.options.length-1){
  79. obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
  80. }
  81. }
  82. }
  83. //-->
  84. </script>
  85. </BODY>
  86. </HTML>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Vue自定义动态组件使用详解

分享页面后跳转回首页

以上就是JS做出左右边列表相互移动效果的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行