两文本框互换数据

最新推荐文章于 2018-12-21 16:52:51 发布
最新推荐文章于 2018-12-21 16:52:51 发布
阅读量284 收藏
点赞数
分类专栏： 笔记 文章标签： JavaScript HTML ViewUI

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>
 </head>
 <body>
 <table>
 <tr>
 <td>
  <select id="dest" SIZE=10 multiple="multiple">
    <option VALUE="1">  001  </option>
    <option VALUE="2">  002  </option>
    <option VALUE="3">  003  </option>
  </select>
  </td>
  <td>
  <INPUT type=button id="copyA" value="<-copy" οnclick="copyToLeftA()" />
  <br/>
  <INPUT type=button id="copyB" value="copy->" οnclick="copyToLeftB()" />
  </td>
  <td>
  <select id="srcv" SIZE=10 multiple>
    <option VALUE="4">  004  </option>
    <option VALUE="5">  005  </option>
    <option VALUE="6">  006  </option>
  </select>
 </td>
 </tr>
  </table>
 </body>
 <script language=JavaScript>
  var srcv = document.getElementById("srcv");
  var dest = document.getElementById("dest");
 
  if(srcv.length<1){
   document.getElementById("copyA").style.display = "none";
  }
  if(dest.length<1){
   document.getElementById("copyB").style.display = "none";
  }  
  
  function copyToLeftA(){
   if(srcv.selectedIndex =='-1' ) {
   alert("Please choose job !");
   return false;
  }
  
  for(var i=0;i<srcv.length;i++){
   if(srcv.options[i].selected){
    var myOption=document.createElement("option");
    myOption.setAttribute("value",srcv[i].value);
    var optionText= document.createTextNode(srcv[i].text);
    dest.add(myOption);
    myOption.appendChild(optionText);
    srcv.remove(i--);
   }
  }

  if(srcv.length<1){
   document.getElementById("copyA").style.display = "none";
  }else{
   document.getElementById("copyA").style.display = "";
  }
  if(dest.length<1){
   document.getElementById("copyB").style.display = "none";
  }else{
   document.getElementById("copyB").style.display = "";
  }
     /*var dest = document.getElementById("dest");
  var selectNumB=dest.selectedIndex;
  
  if(selectNumA!='-1'){
     var myOption=document.createElement("option");
            myOption.setAttribute("value",srcv[selectNumA].value);
  var optionText= document.createTextNode(srcv[selectNumA].text);
            dest.add(myOption);
            myOption.appendChild(optionText);
   srcv.remove(selectNumA);
  }
   
  if(selectNumB!='-1'){
     var myOption=document.createElement("option");
            myOption.setAttribute("value",dest[selectNumB].value);
  var optionText= document.createTextNode(dest[selectNumB].text);
            srcv.add(myOption);
            myOption.appendChild(optionText);
   dest.remove(selectNumB);
  }*/
  }
    function copyToLeftB(){ 
   if(dest.selectedIndex =='-1' ) {
   alert("Please choose job !");
   return false;
  }
  
  for(var i=0;i<dest.length;i++){
   if(dest.options[i].selected){
    var myOption=document.createElement("option");
    myOption.setAttribute("value",dest[i].value);
    var optionText= document.createTextNode(dest[i].text);
    srcv.add(myOption);
    myOption.appendChild(optionText);
    dest.remove(i--);
   }
  }
  if(srcv.length<1){
   document.getElementById("copyA").style.display = "none";
  }else{
   document.getElementById("copyA").style.display = "";
  }
  if(dest.length<1){
   document.getElementById("copyB").style.display = "none";
  }else{
   document.getElementById("copyB").style.display = "";
  }
     /*var dest = document.getElementById("dest");
  var selectNumB=dest.selectedIndex;
  
  if(selectNumA!='-1'){
     var myOption=document.createElement("option");
            myOption.setAttribute("value",srcv[selectNumA].value);
  var optionText= document.createTextNode(srcv[selectNumA].text);
            dest.add(myOption);
            myOption.appendChild(optionText);
   srcv.remove(selectNumA);
  }
   
  if(selectNumB!='-1'){
     var myOption=document.createElement("option");
            myOption.setAttribute("value",dest[selectNumB].value);
  var optionText= document.createTextNode(dest[selectNumB].text);
            srcv.add(myOption);
            myOption.appendChild(optionText);
   dest.remove(selectNumB);
  }*/
  }
 </script>
</html>

vvmtang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两个文本框内容交换（js收藏1）
keep hungry keep foolish
03-31 3700
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><title>Select下拉列表框进行多选、移除、交换内容</title><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><
js表单文本框内容互换代码
04-07
js表单文本框内容互换代码是一款点击内容互换切换订票城市内容互换特效。
js点击文本框内容互换代码.zip
07-11
js代码 [removed] function change(){ var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; { document.getElementById("num2").value = num1; document.getElementById("num1").value = num2; } } [removed]
input文本框交换事件
java中摸爬滚打的GIS开发人员
08-31 581
做前端的demo做到文本框交换的事件，车站查询，类似于携程旅游的网站上，只是目前还没有完全解决，只是实现了简单的点击事件触发文本框的互相交换事件，很简单。代码如下
JavaScript：两个可以互相交换数据的列表框
u010987803的专栏
06-20 586
addMulitOptions.html // 移动id为from的列表中的选中项到id为to的列表中 function move(from,to) { // 获取移动源
数据分类处理与数据分析.docx
12-23
数据分类处理与数据分析全文共3页，当前为第1页。数据分类处理与数据分析全文共3页，当前为第1页。数据的分类处理与数据... （文字部分，请直接在该Excel工作表中插入文本框进行编辑撰写） 数据分类处理与数据分析 2
IEEE754浮点数与十六进制数转换器源码
11-06
自己用Qt5.4.1的Qt Creator开发的IEEE754浮点数与十六进制数转换器，可以供Qt初学者学习槽函数的用法，也可以学习IEEE754浮点数与十六进制数...两个文本框关联，实时将浮点数与十六进制数互相转换，代码精简，功能强大
Excel表格的基本操作初学者专用超级技能.pdf
05-18
技巧 17、两列互换：在下面的表中，选取 C 列，光标放在边线处，按 shift 同时按下鼠标左键不松，拖动到 B 列前面，当 B 列前出现虚线时，松开鼠标左键即完成互换。 技巧 18、批量设置求和公式：选取包括黄色行列的...
JAVA上百实例源码以及开源项目源代码
09-17
　Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
字符串与HTML相互转换
实践求真知
04-12 1万+
一 代码 字符串与HTML相互转换 <!-- .STYLE3 { font-size: 13px; color: #993300; } .STYLE4 { font-size: 20px; color: #993300; font-family: "新宋体"; font-weight: bold; } .STYLE5 {font-size: 1
实现点击按钮后，一个文本框中的值复制到另一个中。
kobe1qiqi的博客
11-03 1892
$("#queding").click(function(){ $("#residentName").val($("#user1").val());//residentName 的值=user1 中的值。 }); 或者 document.getElementById("residentName").value=document.getElementByI
jsp中两个框中内容互换
你究竟是想一辈子卖糖水，还是希望获得改变世界的机会？
09-30 1777
在项目中需要实现如下的效果内容。如图： 具体实现的源码如下： 两个框的页面源码： 已选角色： 主任 医师 护士 前台 内勤
vue页面之间数据的传递
06-27 3262
vue页面之间数据的传递和回显
设置html 输入框控件text的自定义长度宽度和字体的大小
热门推荐
cddchina的专栏
07-15 5万+
C#/.NET 类与文本框绑定（值变化时自动变），数据绑定Binding
老陈聊架构
12-21 4768
我个人使用的基本是这个重载， propertyName：绑定控件的某个属性（加个双引号变成字符串类型） dataSource：指的是某个类 dataMember：代表类的某个具体属性 相关类型转化也在下面， public void SetParameter(WorkbenchConfig para) { Binding binding = ...
winform怎么获取文本框的数据
最新发布
09-07
在WinForm中，可以使用TextBox控件的Text属性来获取文本框中的数据。通过访问文本框的Text属性，您可以获取用户在文本框中输入的数据。例如，如果您有一个名为LogintextBox的文本框，您可以使用以下代码来获取其数据： string loginText = LogintextBox.Text; 同样地，如果您有一个名为PasswordtextBox的文本框，您可以使用以下代码来获取其数据： string passwordText = PasswordtextBox.Text; 通过访问各个文本框的Text属性，您可以获取用户在WinForm应用程序中输入的数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值