Dom操作小实例----非常实用，将数据在两个select之间转移

最新推荐文章于 2018-11-15 10:42:00 发布
最新推荐文章于 2018-11-15 10:42:00 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BillGates10001/article/details/50902771
版权
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>无标题文档</title>  
  5.   
  6. <style type="text/css">  
  7. <!--  
  8. BODY  
  9. {  
  10.     font-family:"Courier";  
  11.     font-size: 12px;  
  12.     margin:0px 0px 0px 0px;  
  13.     overflow-x:no;  
  14.     overflow-y:no;  
  15.     background-color: #B8D3F4;  
  16. }  
  17. td  
  18. {  
  19.     font-size:12px;  
  20. }  
  21. .default_input  
  22. {  
  23.     border:1px solid #666666;  
  24.     height:18px;  
  25.     font-size:12px;  
  26. }  
  27. .default_input2  
  28. {  
  29.     border:1px solid #666666;  
  30.     height:18px;  
  31.     font-size:12px;  
  32. }  
  33. .nowrite_input  
  34. {  
  35.     border:1px solid #849EB5;  
  36.     height:18px;  
  37.     font-size:12px;  
  38.     background-color:#EBEAE7;  
  39.     color: #9E9A9E;  
  40. }  
  41. .default_list  
  42. {  
  43.     font-size:12px;  
  44.   border:1px solid #849EB5;  
  45. }  
  46. .default_textarea  
  47. {  
  48.     font-size:12px;  
  49.     border:1px solid #849EB5;  
  50. }  
  51.   
  52. .nowrite_textarea  
  53. {  
  54.     border:1px solid #849EB5;  
  55.     font-size:12px;  
  56.     background-color:#EBEAE7;  
  57.     color: #9E9A9E;  
  58. }  
  59.   
  60. .wordtd5 {  
  61.     font-size: 12px;  
  62.     text-align: center;  
  63.     vertical-align:top;  
  64.     padding-top: 6px;  
  65.     padding-right: 5px;  
  66.     padding-bottom: 3px;  
  67.     padding-left: 5px;  
  68.     background-color: #b8c4f4;  
  69. }  
  70.   
  71. .wordtd {  
  72.     font-size: 12px;  
  73.     text-align: left;  
  74.     vertical-align:top;  
  75.     padding-top: 6px;  
  76.     padding-right: 5px;  
  77.     padding-bottom: 3px;  
  78.     padding-left: 5px;  
  79.     background-color: #b8c4f4;  
  80. }  
  81. .wordtd_1 {  
  82.     font-size: 12px;  
  83.     vertical-align:top;  
  84.     padding-top: 6px;  
  85.     padding-right: 5px;  
  86.     padding-bottom: 3px;  
  87.     padding-left: 5px;  
  88.     background-color: #516CD6;  
  89.     color:#fff;  
  90. }  
  91. .wordtd_2{  
  92.     font-size: 12px;  
  93.     text-align: right;  
  94.     vertical-align:top;  
  95.     padding-top: 6px;  
  96.     padding-right: 5px;  
  97.     padding-bottom: 3px;  
  98.     padding-left: 5px;  
  99.     background-color: #64BDF9;  
  100. }  
  101. .wordtd_3{  
  102.     font-size: 12px;  
  103.     text-align: right;  
  104.     vertical-align:top;  
  105.     padding-top: 6px;  
  106.     padding-right: 5px;  
  107.     padding-bottom: 3px;  
  108.     padding-left: 5px;  
  109.     background-color: #F1DD34;  
  110. }  
  111. .inputtd  
  112. {  
  113.     font-size:12px;  
  114.     vertical-align:top;  
  115.     padding-top: 3px;  
  116.     padding-right: 3px;  
  117.     padding-bottom: 3px;  
  118.     padding-left: 3px;  
  119. }  
  120. .inputtd2  
  121. {  
  122.     text-align: center;  
  123.     font-size:12px;  
  124.     vertical-align:top;  
  125.     padding-top: 3px;  
  126.     padding-right: 3px;  
  127.     padding-bottom: 3px;  
  128.     padding-left: 3px;  
  129. }  
  130. .tablebg  
  131. {  
  132.     font-size:12px;  
  133. }  
  134.   
  135. .tb{  
  136.     border-collapse: collapse;  
  137.     border: 1px outset #999999;  
  138.     background-color: #FFFFFF;  
  139. }  
  140. .td2{line-height:22px; text-align:center; background-color:#F6F6F6;}  
  141. .td3{background-color:#B8D3F4; text-align:center; line-height:20px;}  
  142. .td4{background-color:#F6F6F6;line-height:20px;}  
  143. .td5{border:#000000 solid;  
  144.        border-right-width:0px;  
  145.        border-left-width:0px;  
  146.        border-top-width:0px;  
  147.        border-bottom-width:1px;}  
  148.   
  149. .tb td{  
  150. font-size: 12px;  
  151. border: 2px groove #ffffff;  
  152. }  
  153.   
  154.   
  155.   
  156.   
  157. .noborder {  
  158.     border: none;  
  159. }  
  160.   
  161. .button {  
  162.     border: 1px ridge #ffffff;  
  163.     line-height:18px;  
  164.     height: 20px;  
  165.     width: 45px;  
  166.     padding-top: 0px;  
  167.     background:#CBDAF7;  
  168.     color:#000000;  
  169.     font-size: 9pt;  
  170.     font-family:"Courier";  
  171. }   
  172.   
  173. .textarea {  
  174.     font-family: Arial, Helvetica, sans-serif, "??";  
  175.     font-size: 9pt;  
  176.     color: #000000;  
  177.     border-bottom-width: 1px;  
  178.     border-top-style: none;  
  179.     border-right-style: none;  
  180.     border-bottom-style: solid;  
  181.     border-left-style: none;  
  182.     border-bottom-color: #000000;  
  183.     background-color:transparent;  
  184.     text-align: left  
  185. }  
  186. -->  
  187. </style></head>  
  188.   
  189. <body>  
  190.   
  191. <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">  
  192. <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">  
  193.   <tr>  
  194.     <td width="126">  
  195.         <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->  
  196.         <select name="first" multiple="multiple" size=10 class="td3" id="s">  
  197.           <option value="选项1">选项1</option>  
  198.           <option value="选项2">选项2</option>  
  199.           <option value="选项3">选项3</option>  
  200.           <option value="选项4">选项4</option>  
  201.           <option value="选项5">选项5</option>  
  202.           <option value="选项6">选项6</option>  
  203.           <option value="选项7">选项7</option>  
  204.           <option value="选项8">选项8</option>  
  205.         </select>      
  206.     </td>  
  207.     <td width="69" valign="middle">  
  208.        <input name="add"  id="add" type="button" class="button" value="-->" />   
  209.        <input name="add_all" id="add_all"  type="button" class="button" value="==>" />   
  210.        <input name="remove"  id="remove" type="button" class="button" value="<--" />  
  211.        <input name="remove_all"  id="remove_all" type="button" class="button" value="<==" />  
  212.         </td>  
  213.     <td width="127" align="left">  
  214.       <select name="second" size="10" multiple="multiple" class="td3" id="second">  
  215.          <option value="选项9">选项9</option>  
  216.       </select>  
  217.     </td>  
  218.   </tr>  
  219. </table>  
  220. </div>  
  221. </body>  
  222. <script type="text/javascript">  
  223.     window.onload=function(){  
  224. /*************************************************************************************************************/       
  225.      //选中的从左端移到右端  
  226.      //<input name="add"  id="add" type="button" class="button" value="-->" />   
  227.      document.getElementById("add").onclick=function(){  
  228.          //获取<select name="first" multiple="multiple" size=10 class="td3" id="first">  
  229.          var firstElement=document.getElementById("first");  
  230.           
  231.          //获取option  
  232.          var optionElements=firstElement.getElementsByTagName("option");  
  233.          var len=optionElements.length;  
  234.          //alert(len)  
  235.           
  236.         //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">  
  237.          var secondElement=document.getElementById("second");  
  238.           
  239.         //遍历option  
  240.          for(var i=0;i<len;i++){  
  241.             var optionElement=optionElements[i];  
  242.             /*  
  243.              * firstElement.selectedIndex:  
  244.              *   * 表示当前选中的option的索引值,从0开始  
  245.              *   * 如果没有被选中的，selectedIndex=-1  
  246.              *   * 如果有多个被选中,selectedIndex的值永远是第一个被选中的值  
  247.              *   * javaScript的数组是动态的数组,数组的长度是可变的,索引值也在变  
  248.              */  
  249.               
  250.             if (firstElement.selectedIndex != -1) {  
  251.               // alert(firstElement.selectedIndex);  
  252.                secondElement.appendChild(optionElements[firstElement.selectedIndex]);  
  253.             }             
  254.          }  
  255.      }  
  256.      //-------------------------------------------------------------------  
  257.      //全部移动  
  258.      document.getElementById("add_all").onclick=function()  
  259.      {  
  260.          var firstElement=document.getElementById("first");  
  261.           
  262.          //获取option  
  263.          var optionElements=firstElement.getElementsByTagName("option");  
  264.          var len=optionElements.length;  
  265.          //alert(len)  
  266.           
  267.         //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">  
  268.          var secondElement=document.getElementById("second");  
  269.           
  270.         //遍历option  
  271.          for(var i=0;i<len;i++){  
  272.                secondElement.appendChild(optionElements[0]);      
  273.          }  
  274.      }  
  275.      //全部移动简化的  
  276.      /*  
  277.      document.getElementById("add_all").onclick=function()  
  278.      {  
  279.          var firstElement=document.getElementById("first");  
  280.          var secondElement=document.getElementById("second");  
  281.          var optionElements=firstElement.getElementsByTagName("option");  
  282.          var len=firstElement.length;  
  283.         //遍历option  
  284.          for(var i=0;i<len;i++){  
  285.                secondElement.appendChild(optionElements[0]);      
  286.          }  
  287.            
  288.      }  
  289.      */  
  290.        
  291.      //双击从左边移动到右边  
  292.      /*  
  293.      document.getElementById("first").ondblclick=function()  
  294.      {  
  295.         var firstElement=document.getElementById("first");  
  296.         var optionElements=firstElement.getElementsByTagName("option");  
  297.         var secondElement=document.getElementById("second");  
  298.         for(var i=0;i<optionElements.length;i++)  
  299.         {  
  300.             secondElement.appendChild(optionElements[firstElement.selectedIndex]);   
  301.         }  
  302.      }  
  303.      */  
  304.      //双击右移简化  
  305.      document.getElementById("first").ondblclick=function()  
  306.      {  
  307.         var secondElement=document.getElementById("second");  
  308.         secondElement.appendChild(this[this.selectedIndex]);  
  309.      }  
  310.      //选中的从右到左  
  311.      document.getElementById("remove").onclick=function()  
  312.      {  
  313.         var secondElement=document.getElementById("second");  
  314.           
  315.          //获取option  
  316.          var optionElements=secondElement.getElementsByTagName("option");  
  317.          var len=optionElements.length;  
  318.          //alert(len)  
  319.           
  320.         //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">  
  321.          var firstElement=document.getElementById("first");  
  322.           
  323.         //遍历option  
  324.          for(var i=0;i<len;i++){  
  325.                
  326.             if (secondElement.selectedIndex != -1) {  
  327.               firstElement.appendChild(optionElements[secondElement.selectedIndex]);  
  328.             }     
  329.          }  
  330.      }    
  331.   
  332.   
  333.     //全部的左移  
  334.     document.getElementById("remove_all").onclick=function()  
  335.      {  
  336.          var secondElement=document.getElementById("second");  
  337.          var firstElement=document.getElementById("first");  
  338.          var optionElements=secondElement.getElementsByTagName("option");  
  339.          var len=secondElement.length;  
  340.         //遍历option  
  341.          for(var i=0;i<len;i++){  
  342.                firstElement.appendChild(optionElements[0]);       
  343.          }  
  344.            
  345.      }  
  346.        
  347.      //双击左移  
  348.      document.getElementById("second").ondblclick=function()  
  349.      {  
  350.         var firstElement=document.getElementById("first");  
  351.         firstElement.appendChild(this[this.selectedIndex]);  
  352.      }  
  353.        
  354. }  
  355. </script>  
  356. </html>  
BillGates10001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于template-web.js模板 的select动态二级联动 实例
05-31
5. **测试和优化**：确保实例在不同浏览器和设备上都能正常工作，同时考虑性能优化，如避免不必要的数据请求和DOM操作。 在提供的压缩包中，`1.html`文件是包含上述逻辑的示例页面，`template-web.js`和`template-...
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
10-18
在这个例子中，我们有两个组件：`my-select`作为父组件，`my-ul`作为子组件。`my-select`包含一个输入框和一个按钮，而`my-ul`则负责展示下拉列表。 父组件`my-select`的数据属性`ulShow`控制着下拉列表的显示和...
jQuery中的DOM操作整理
wangyun_www的博客
08-18 9027
1.创建元素节点例如，创建两个<li>元素节点，并加入到<ul>中 首先创建元素节点var $li_1=$("<li></li>"); var $li_2=$("<li></li>"); 然后蒋新创建的节点插入文档中$("ul").append($li_1); $("ul").append($li_2);/*也可以写成$("ul").append($li_1).append($li_2)*/2.
jQuery 实现左右Select列表数据互换
小灯光环
11-23 3372
关于jquery实现左右Select列表数据互换
Jquery的append()方法实现两个数组列表的项目互相移动的效果
weixin_33962923的博客
05-08 366
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
12-08
在本文中，我们将探讨如何使用Bootstrap Table与X-Editable插件实现行内单元格编辑功能，同时解决数据显示为空（Empty）的问题，并支持多种样式。Bootstrap Table是一个强大的前端表格库，它提供了丰富的功能，如...
DOM操作和jQuery实现选项移动操作的简单实例
11-22
在本文中，我们将探讨如何使用DOM操作和jQuery库来实现在多选下拉框中进行选项的移动操作。首先，让我们了解DOM（Document Object Model）和jQuery的基本概念。 DOM是HTML和XML文档的一种标准表示方式，它允许我们...
vue.js 实现v-model与{{}}指令方法
10-17
在Vue中，`v-model` 和 `{{}}`（插值表达式）是两个核心的指令，它们使得数据和视图之间的交互变得简单。本文将深入讲解如何在Vue.js中实现这两个指令。 首先，`v-model` 是Vue中用于双向数据绑定的指令，常用于...
SQL查出任意两个数之间的所有数字
michael2110的专栏
11-07 4540
如题，例如200~300间的所有数字。 select temp.a from (select level as a from dual connect by level 1;
DOM操作
weixin_34258838的博客
11-15 87
1.通过节点关系查找节点 1 从一个节点出发开始查找 2 parentNode： 获取当前元素的父节点。 3 childNodes：获取当前元素的所有下一级子元素。 4 firstChild：获取当前节点的第一个子节点。 5 lastChild：获取当前节点的最后一个子节点。 6 nextSibling：获取当前节点的下一个节点。（兄节点） 7 previousSibling：获...
jquery 实现两个select之间option的转移
phoenixfm的专栏
03-13 1235
 $("#dxry option:selected").appendTo("#yxry");  从dxry 中添加到yxry 
jQuery DOM操作之结点转移复制
weixin_33976072的博客
09-25 194
jQuery DOM操作之结点转移复制$('div').append($('p'))这样即可把p标签移动到div标签里$('div').append( $('p').html() )是把p标签里的内容复制到div标签里$('div').append( $('p').clone(true))是复制一份到div标签里，原来的标签还保留着$(function(){ $(".nm_ul li").clic...
jQuery实现两个列表框的值之间的互换：
迷彩风情
01-28 247
jQuery实现两个列表框的值之间的互换： 截图如下： 代码如下： &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme(...
ASP+ACCESS网上图书销售系统(源代码+论文).rar
07-21
ASP+ACCESS网上图书销售系统(源代码+论文)
ASP+ACCESS网上园林设计(源代码+论文).rar
07-21
ASP+ACCESS网上园林设计(源代码+论文)
利用VC从数据库提取数据，绘制趋势曲线图
最新发布
07-21
在VC++中，实现从数据库读取数据的功能，并依据获取的数据绘制出曲线图形。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
ASP图书管理系统(源代码+论文).rar
07-21
ASP图书管理系统(源代码+论文)
el-select获取选中的label
06-28
其中，this.$refs.select可以获取到el-select组件的dom元素，options是一个数组，表示所有选项的dom元素。我们可以通过遍历options数组，找到选中的value，然后获取对应的标签文本内容，即选中的label值。 以上就是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值