Select列表框交换数据【简单的记录下】

最新推荐文章于 2023-04-25 10:03:13 发布
最新推荐文章于 2023-04-25 10:03:13 发布
阅读量679 收藏
点赞数
分类专栏： JS
<!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>
tatsuya.tt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax+PHP实现的分类列表框功能示例
10-17
- Ajax是一种Web开发技术，允许在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容。 - 在这个示例中，Ajax用于在用户选择商品的大类别后，异步地向服务器发送请求，获取对应的子类别，并动态填充...
左右两个Select列表框交换数据的JS
网站开发初中级代码参考-转载
09-15 174
&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 1610
话不多说，直接上代码~~
左右移动数据vue+elementui
weixin_48289449的博客
09-05 2310
功能：将两个表格中的数据进行移动，针对内容较多的表格+上下移动的功能。
element-puls实现上下两个表格左右滑动时需要一起联动
m0_46508575的博客
02-01 993
上下两个表格左右滚动联动
vue实现左右多选框
sinat_38728160的博客
11-27 2628
html部分代码 <fieldset> <table class="table table-bordered dchannel-table"> <tbody> <tr> <td><span style="width: 50%;">搜索结果：接口名字(接口包名)</span>&...
易语言数据库数据交换工具源码
06-02
易语言提供了丰富的控件库，如文本框、按钮、列表框等，可以方便地构建图形化界面。 6. 源码学习价值： 对于易语言学习者来说，此资源具有很高的学习价值。它展示了如何使用易语言与数据库交互、处理数据以及设计...
上传MYSQL数据库、EXCEL导入导出超级列表框-易语言
06-12
在这个项目中，超级列表框被用来显示数据库中的记录，用户可以选择、编辑或删除数据。通过与Excel的交互，用户还可以将列表框中的数据导出为Excel文件，或者直接从Excel文件导入数据到列表框，这样不仅提高了数据...
CourseSelect.rar_CourseSelect_j2me_手机
09-21
此外，为了实现网络通信，可能还利用了J2ME的WMA（Wireless Messaging API）或Nokia的JSR-118（JavaTM API for Multimedia Messaging Service）来支持数据交换，使用户能在离线状态下也能完成选课操作。 在文件列表...
列表框的一个扩展控件
11-13
5. 拖放支持：允许用户通过拖放操作重新排序列表项，或者与其他控件交换数据。 6. 鼠标和键盘事件处理：提供自定义的鼠标点击和键盘导航行为，以实现更丰富的用户交互。 为了使用CGfxListView，开发者需要了解如何...
移动mobileSelect插件及省市区数据
08-26
app手机端使用mobileSelect插件手动选择省市区
select选择框内容左右移动
04-08
select选择框内容左右移动源码，请大家参考。
select互选效果
09-14
实现了两个select值互选的效果,可以多选也可以单选
VB在ListBox控件间移动列表项交换数据
05-12
内容索引:VB源码,界面编程,列表　　VB在ListBox控件间移动列表项，也就是两个列表项互相交换数据，将选择的列表项从List1移到List2，如果List1中没有选中的列表项则选择第一个列表项，如果List2中没有列表项则退出……这些有意思的if/else想看个究竟的话，就直接看代码好了，这里不啰嗦了。
select列表交换数据
01-19
select列表交换数据
Select列表框交换数据
黑虫
07-01 184
[code="html"] Select列表框交换数据 center { font-size:12px; color:red; font-weight:bold; } select { font-size:12px; color:green; } 可选择排序方式 ...
vue点击左右滑动按钮滑动数据
@you的博客
04-24 2460
<template> <div style="width: 100%"> <div class="monitor-list"> <!-- 左边按钮 --> <div class="btn" @click="scrollLeft"> <i class="el-icon el-icon-caret-left" /> ...
JQUERY 在 ASP.NET C#,VB 中将项目从一个列表框移动到另一个列表框
最新发布
m0_50971283的博客
04-25 426
第一个按钮用于将所选项目从第一个列表框移动到第二个列表框，第二个按钮用于将所有项目（无论是否选中）移动到第二个列表框，第三个按钮用于将所选项目移回第一个列表框，第四个按钮用于将所有项目移回第一个列表框。在处理 Asp.Net 项目时，得到了将项目从一个列表框移动到另一个列表框的要求，如上面的演示图像所示，这可以很容易地在服务器端和客户端完成。在本文中，将通过一个示例展示在 Asp.Net 中使用 jQuery 以及 C# 和 VB 在两个列表框控件之间移动单个或多个选定项目。
JavaScript 经典代码（11）
weixin_34417183的博客
12-26 100
&lt;script language="JavaScript1.2"&gt;/* This following code are designed and writen by Windy_sk &lt;windy_sk@126.com&gt; You can use it freely, but u must held all the copyright items!*/var MainSel ...
JavaScript操作下拉列表框(select)详解
"本文主要讲解了如何使用JavaScript操作HTML中的下拉列表框（select），包括获取选项数量、检查选中状态、获取值和文本、删除与添加选项等基本操作。" 在网页开发中，JavaScript是一种常用的客户端脚本语言，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值