左右两个select列表框交换数据

最新推荐文章于 2022-12-27 16:06:31 发布
最新推荐文章于 2022-12-27 16:06:31 发布
阅读量842 收藏
点赞数 2
分类专栏： 技术

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> Select列表框交换数据</TITLE> 
</HEAD> 
<style> 
    center 
    { 
        font-size:12px; 
        color:red; 
        font-weight:bold; 
    } 
    select 
    { 
        font-size:12px; 
        color:green; 
    } 
</style> 
<BODY> 
    <span id='feedback'></span> 
     
    <form method="post" name="myform"> 
  <table border="0" width="400"> 
 <tr> 
  <td><CENTER>可选择排序方式</CENTER></td> 
  <td> </td> 
  <td><CENTER>已选择排序方式</CENTER></td> 
 </tr> 
    <tr> 
      <td width="40%"> 
  <select  multiple name="left" id="left" size="8" style='width:200;' 
  οndblclick="moveOption(document.getElementById('left'), document.getElementById('right'))"> 
       <option value="20">ASP</option> 
       <option value="30">PHP</option> 
       <option value="40">ASP.NET</option> 
       <option value="50">JSP</option> 
       <option value="60">VB</option> 
       <option value="70">DELPHI</option>   
       <option value="80">AJAX</option> 
       <option value="90">JQUERY</option>   
  </select> 
   </td> 
      <td width="20%" align="center"> 
  <input type="button" value=" >> " οnclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br> 
  <input type="button" value=" << " οnclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> 
   </td> 
      <td width="40%"> 
  <select  multiple name="right" id="right" size="8" style='width:200;' 
  οndblclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> 
  </select> 
   </td> 
    </tr> 
 <tr> 
  <td colspan="3"> 
  <CENTER> 
  <INPUT TYPE="button" value="置顶" οnclick="moveTop(document.getElementById('right'));"> 
  <INPUT TYPE="button" value="上移" οnclick="moveUp(document.getElementById('right'));"> 
  <INPUT TYPE="button" value="下移" οnclick="moveDown(document.getElementById('right'));"> 
  <INPUT TYPE="button" value="置底" οnclick="moveBottom(document.getElementById('right'));"> 
  </CENTER></td> 
 </tr> 
  </table> 
     
  
</BODY> 
</HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
    //上移 
　   function moveUp(obj) 
　　{　 
　　　　　　for(var i=1; i < obj.length; i++) 
　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始 
　　　　　　　　if(obj.options[i].selected) 
　　　　　　　　{ 
　　　　　　　　　　if(!obj.options.item(i-1).selected) 
　　　　　　　　　　{ 
　　　　　　　　　　　　var selText = obj.options[i].text; 
　　　　　　　　　　　　var selValue = obj.options[i].value; 
                        obj.options[i].text = obj.options[i-1].text; 
                        obj.options[i].value = obj.options[i-1].value; 
                        obj.options[i].selected = false; 
                        obj.options[i-1].text = selText; 
                        obj.options[i-1].value = selValue; 
                        obj.options[i-1].selected=true; 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
        //下移 
        function moveDown(obj) 
　　　　{ 
　　　　　　for(var i = obj.length -2 ; i >= 0; i--) 
　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始 
　　　　　　　　if(obj.options[i].selected) 
　　　　　　　　{ 
　　　　　　　　　　if(!obj.options[i+1].selected) 
　　　　　　　　　　{ 
　　　　　　　　　　　　var selText = obj.options[i].text; 
　　　　　　　　　　　　var selValue = obj.options[i].value; 
            obj.options[i].text = obj.options[i+1].text; 
            obj.options[i].value = obj.options[i+1].value; 
           obj.options[i].selected = false; 
          obj.options[i+1].text = selText; 
          obj.options[i+1].value = selValue; 
         obj.options[i+1].selected=true; 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
        //移动 
        function moveOption(obj1, obj2) 
        { 
             for(var i = obj1.options.length - 1 ; i >= 0 ; i--) 
             { 
                 if(obj1.options[i].selected) 
                 { 
                    var opt = new Option(obj1.options[i].text,obj1.options[i].value); 
                    opt.selected = true; 
                    obj2.options.add(opt); 
                    obj1.remove(i); 
                } 
             } 
        } 
        //置顶 
      function  moveTop(obj)  
      {  
            var  opts = [];  
            for(var i =obj.options.length -1 ; i >= 0; i--) 
            { 
                if(obj.options[i].selected) 
                { 
                    opts.push(obj.options[i]); 
                    obj.remove(i); 
                } 
            } 
            var index = 0 ; 
            for(var t = opts.length-1 ; t>=0 ; t--) 
            { 
                var opt = new Option(opts[t].text,opts[t].value); 
                opt.selected = true; 
                obj.options.add(opt, index++); 
            } 
        }  
      //置底 
      function  moveBottom(obj)  
      {  
            var  opts = [];  
            for(var i =obj.options.length -1 ; i >= 0; i--) 
            { 
                if(obj.options[i].selected) 
                { 
                    opts.push(obj.options[i]); 
                    obj.remove(i); 
                } 
            } 
             for(var t = opts.length-1 ; t>=0 ; t--) 
            { 
                var opt = new Option(opts[t].text,opts[t].value); 
                opt.selected = true; 
                obj.options.add(opt); 
            } 
        }  
    //--> 
</SCRIPT> 
景予
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select各种效果:select带搜索框 多个option项目选择
08-10
select各种效果:select带搜索框 多个option项目选择
vue实现左右多选框
sinat_38728160的博客
11-27 2525
html部分代码 <fieldset> <table class="table table-bordered dchannel-table"> <tbody> <tr> <td><span style="width: 50%;">搜索结果：接口名字(接口包名)</span>&...
用JavaScript实现两个列表框的数据移动
牵挂著你是那颗我的心 飘呀飘地在你面前捉摸不定 牵挂著你是那份我的情 吹呀吹到你的眼前我的心 我不愿看到你那湿润的眼睛 怕我会忍不住疼你怕你伤心 我不愿听见你说寂寞的声音 怕我会忍不自你说我的真感情
09-19 1449
用JavaScript实现两个列表框的数据移动function addOption(fromSelectObject, toSelectObject, maxLimit){    var overMax = false;    for(i=0; i        if(fromSelectObject.options[i].selected == true){            if(maxL
js实现两个列表框交换数据
h183288132的专栏
05-31 3252
JavaScript：两个可以互相交换数据的列表框 分类： JavaScript2012-07-11 15:28 1344人阅读 评论(4) 收藏 举报 javascriptbuttonhtmlinputfunction 还是那位博主的一篇关于JavaScript js 左右移动下拉列表选项的文章，我也用自己的方法实现了一下，感觉还是使用js原生的方法比较方便、简单。
左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底
雪地里的白开水的博客
03-24 783
"-//W3C//DTD HTML 4.0 Transitional//EN">          Select列表框交换数据             center       {           font-size:12px;           color:red;           font-weight:bold;       }       select  
左右两个Select列表框交换数据的JS
网站开发初中级代码参考-转载
09-15 162
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; Select列表框交换数据&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;style&gt; center { font-s
element 穿梭框（实现左右表格数据移动）
weixin_47092531的博客
12-27 1461
话不多说，直接上代码~~
Select列表框交换数据
黑虫
07-01 170
[code="html"] Select列表框交换数据 center { font-size:12px; color:red; font-weight:bold; } select { font-size:12px; color:green; } 可选择排序方式 ...
vue点击左右滑动按钮滑动数据
@you的博客
04-24 2420
<template> <div style="width: 100%"> <div class="monitor-list"> <!-- 左边按钮 --> <div class="btn" @click="scrollLeft"> <i class="el-icon el-icon-caret-left" /> ...
左右移动数据vue+elementui
weixin_48289449的博客
09-05 1791
功能：将两个表格中的数据进行移动，针对内容较多的表格+上下移动的功能。
select互选效果
09-14
实现了两个select值互选的效果,可以多选也可以单选
select列表交换数据
01-19
select列表交换数据
C#.net_经典编程例子400个
05-17
294 实例206　允许和禁止用户关机　295 实例207　锁定计算机　296 7.5　系统设置　297 实例208　设置系统输入法　297 实例209　设置桌面颜色　298 实例210　鼠标交换左右键　299 7.6　系统监控...
一个好用的数据库类
05-14
*/ <br> /*下面的循环用于向列表框中插入数据， set.m_coldata是一个COL_DATA_ODBC的结构， 当含有当前行的数据值，数据值的长度信息，这样就实现了从记录集中取数据的功能。*/ int iRow = 0; while...
PHP基础教程 是一个比较有价值的PHP新手教程！
04-24
// 一个包含两个元素的数组 $a[0] = "first"; $a[1] = "second"; $a[] = "third"; // 添加数组元素的简单方法 // 现在$a[2]被赋值为"third" echo count($a); // 打印出3，因为该是...
程序天下:JavaScript实例自学手册
07-08
6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势.docx
04-24
2024-2030全球与中国盐氯化系统市场现状及未来发展趋势
基于深度学习的积灰检测识别-图像分类源码+数据集.zip
最新发布
04-24
详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；
两个el-select框互相联动
09-27
两个el-select框的双向联动可以通过监听第一个下拉框的值变化来触发更新第二个下拉框的选项。具体实现方式可以使用@change事件来监听第一个下拉框的值变化，并在事件处理函数中更新第二个下拉框的选项。你可以参考...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值