ListBox实现上移,下移,左移,右移操作

最新推荐文章于 2020-09-17 00:47:29 发布
最新推荐文章于 2020-09-17 00:47:29 发布
阅读量1.1k 收藏
点赞数
[html]  view plain  copy
  1. <html>  
  2. <head>  
  3.     <title>Javascript版选择下拉菜单互移且排序</title>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. </head>  
  6. <body>  
  7.     <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>  
  8.     <form method="post" name="myform">  
  9.     <table border="0" width="300">  
  10.         <tr>  
  11.             <td width="40%">  
  12.                 <select style="width:100px; height:200px" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">  
  13.                     <option value="北京">北京</option>  
  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.                     <option value="湖北">湖北</option>  
  28.                     <option value="湖南">湖南</option>  
  29.                     <option value="内蒙古">内蒙古</option>  
  30.                     <option value="江苏">江苏</option>  
  31.                     <option value="江西">江西</option>  
  32.                     <option value="吉林">吉林</option>  
  33.                     <option value="辽宁">辽宁</option>  
  34.                     <option value="宁夏">宁夏</option>  
  35.                     <option value="青海">青海</option>  
  36.                     <option value="山西">山西</option>  
  37.                     <option value="陕西">陕西</option>  
  38.                     <option value="四川">四川</option>  
  39.                     <option value="天津">天津</option>  
  40.                     <option value="西藏">西藏</option>  
  41.                     <option value="新疆">新疆</option>  
  42.                     <option value="云南">云南</option>  
  43.                     <option value="浙江">浙江</option>  
  44.                     <option value="香港">香港</option>  
  45.                     <option value="澳门">澳门</option>  
  46.                     <option value="台湾">台湾</option>  
  47.                     <option value="其他">其他</option>  
  48.                 </select>  
  49.             </td>  
  50.             <td width="20%" align="center">  
  51.                 <input type="button" value=">>" onclick="moveOption(document.myform.list1, document.myform.list2)"><br />  
  52.                 <br />  
  53.                 <input type="button" value="<<" onclick="moveOption(document.myform.list2, document.myform.list1)">  
  54.             </td>  
  55.             <td width="40%">  
  56.                 <select style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">  
  57.                 </select>  
  58.             </td>  
  59.             <td>  
  60.                 <button onclick="changepos(list2,-1)" type="button">  
  61.                     ∧</button>  
  62.                 <br />  
  63.                 <button onclick="changepos(list2,1)" type="button">  
  64.                     ∨</button>  
  65.             </td>  
  66.         </tr>  
  67.     </table>  
  68.     值：<input type="text" name="city" size="40">  
  69.     </form>  
  70.     <script language="JavaScript">   
  71.     <!--  
  72.         function moveOption(e1, e2) {  
  73.             try {  
  74.                 for (var i = 0; i < e1.options.length; i++) {  
  75.                     if (e1.options[i].selected) {  
  76.                         var e = e1.options[i];  
  77.                         e2.options.add(new Option(e.text, e.value));  
  78.                         e1.remove(i);  
  79.                         i = i - 1  
  80.                     }  
  81.                 }  
  82.                 document.myform.city.value = getvalue(document.myform.list2);  
  83.             }  
  84.             catch (e) { }  
  85.         }  
  86.   
  87.         function getvalue(geto) {  
  88.             var allvalue = "";  
  89.             for (var i = 0; i < geto.options.length; i++) {  
  90.                 allvalue += geto.options[i].value + ",";  
  91.             }  
  92.             return allvalue;  
  93.         }  
  94.   
  95.         function changepos(obj, index) {  
  96.             if (index == -1) {  
  97.                 if (obj.selectedIndex > 0) {  
  98.                     obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))  
  99.                 }  
  100.             }  
  101.             else if (index == 1) {  
  102.                 if (obj.selectedIndex < obj.options.length - 1) {  
  103.                     obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))  
  104.                 }  
  105.             }  
  106.         }   
  107.     //-->   
  108.     </script>  
  109. </body>  
  110. </html>  

[html]  view plain  copy
  1. <html>    
  2. <head>    
  3.     <title>Jquery版选择下拉菜单互移且排序</title>    
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">    
  5.     <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>  
  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:100px; height:200px"  multiple name="list1" id="list1"  ondblclick="ListBox_Move('list1','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.                     <option value="河南">河南</option>    
  28.                     <option value="湖北">湖北</option>    
  29.                     <option value="湖南">湖南</option>    
  30.                     <option value="内蒙古">内蒙古</option>    
  31.                     <option value="江苏">江苏</option>    
  32.                     <option value="江西">江西</option>    
  33.                     <option value="吉林">吉林</option>    
  34.                     <option value="辽宁">辽宁</option>    
  35.                     <option value="宁夏">宁夏</option>    
  36.                     <option value="青海">青海</option>    
  37.                     <option value="山西">山西</option>    
  38.                     <option value="陕西">陕西</option>    
  39.                     <option value="四川">四川</option>    
  40.                     <option value="天津">天津</option>    
  41.                     <option value="西藏">西藏</option>    
  42.                     <option value="新疆">新疆</option>    
  43.                     <option value="云南">云南</option>    
  44.                     <option value="浙江">浙江</option>    
  45.                     <option value="香港">香港</option>    
  46.                     <option value="澳门">澳门</option>    
  47.                     <option value="台湾">台湾</option>    
  48.                     <option value="其他">其他</option>    
  49.                 </select>    
  50.             </td>    
  51.             <td width="20%" align="center">    
  52.                 <input type="button" value=">>" onclick="ListBox_Move('list1','list2')"><br />    
  53.                 <br />    
  54.                 <input type="button" value="<<" onclick="ListBox_Move('list2','list1')">    
  55.             </td>    
  56.             <td width="40%">    
  57.                 <select style="width:100px; height:200px"  multiple name="list2" id="list2"  ondblclick="ListBox_Move('list2','list1')">    
  58.                 </select>    
  59.             </td>    
  60.             <td>    
  61.                 <button onclick="ListBox_Order('list2','up')" type="button">    
  62.                     ∧</button>    
  63.                 <br />    
  64.                 <button onclick="ListBox_Order('list2','down')" type="button">    
  65.                     ∨</button>    
  66.             </td>    
  67.         </tr>    
  68.     </table>    
  69.     值：<input type="text" name="city" size="40">    
  70.     </form>    
  71.     <script language="JavaScript">      
  72.     function ListBox_Move(listfrom,listto)  
  73.     {  
  74.         var size = $("#" + listfrom + " option").size();  
  75.         var selsize = $("#" + listfrom + " option:selected").size();  
  76.         if(size>0 && selsize>0)  
  77.         {  
  78.             $.each($("#"+listfrom+" option:selected"), function(i,own){  
  79.                 $(own).appendTo($("#" + listto));  
  80.                 $("#" + listfrom + "").children("option:first").attr("selected",true);   
  81.             });  
  82.         }  
  83.     }  
  84.   
  85.     function ListBox_Order(ListName,action)  
  86.     {  
  87.         var size = $("#"+ListName+" option").size();  
  88.         var selsize = $("#"+ListName+" option:selected").size();  
  89.         if(size > 0 && selsize > 0)  
  90.         {  
  91.             $.each($("#"+ListName+" option:selected"),function(i,own){  
  92.                 if(action == "up")  
  93.                 {  
  94.                     $(own).prev().insertAfter($(own));  
  95.                 }  
  96.                 else if(action == "down")//down时选中多个连靠则操作没效果  
  97.                 {  
  98.                     $(own).next().insertBefore($(own));  
  99.                 }  
  100.             })  
  101.         }  
  102.     }  
  103.     </script>    
  104. </body>    
  105. </html>    
provence_20
关注
ListBox内容左右移动
weixin_44588370的博客
07-18 1121
页面布局如下： public Form1() { InitializeComponent(); LeftList.Items.Clear();//先是把左边的ListBox的内容清空 string[] LeftStr = new string[] { "苹果", "香蕉", "荔枝"...
ListBox 实现左移右移
suoxl的专栏
07-15 816
listbox and combobox//*****************************************************************************************start...function rightRemove(){     var oSelectCode=document.getElementById("selectCo
asp.net中两个ListBox 左右互相移动，以及上移、下移
diehe5608的博客
10-31 253
<table> <tr> <td> <asp:ListBox ID="leftListBox" runat="server" Width="200" Height="150" SelectionMode="Multiple...
C# ListBox 左移、右移、上移、下移
weixin_30357231的博客
09-29 719
C# ListBox 左移、右移、上移、下移 2012-11-17 22:53:45|分类：技术研讨|标签：listbox|字号订阅 /// <summary> /// /// </summary> /// <param name="sender...
2个Listbox 之间数据的左右移动，及上下移动
weixin_30559481的博客
08-23 470
基本情况 效果图： 左移效果： 其余效果：右边的listbox进行上下移动。 listbox的属性设置为：Multiple 解决方案（一）： 调试结果：PASS (√) Code 1 2publicpartialclassDefault10:System.Web.UI.Page 3{ 4protectedvoidPa...
ListBox控件实现选项的上移、下移、左移、右移
itzhiren的专栏
10-19 2349
HTML>HEAD>TITLE>选择下拉菜单TITLE>meta http-equiv="Content-Type" content="text/html; charset=gb2312">META NAME="Description" CONTENT="Power by hill">HEAD>BODY>p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行
listbox实现添加删除转移及上下移动
buguzl1的专栏
06-03 868
using System.Data.SqlClient;public partial class listbox实现添加删除转移及上下移动 : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {        if (!IsPostBack)        {            b
ListBox实现上移,下移,左移,右移的简单实例
09-04
在本文中，我们将深入探讨如何使用JavaScript实现ListBox的上移、下移、左移和右移功能，这通常用于用户交互，如调整列表顺序或者在两个ListBox之间移动选项。 首先，我们需要一个包含多个选项的ListBox。在提供的...
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
10-18
3. JavaScript函数实现：编写`moveOption`函数，这个函数的作用是根据按钮的标识（上移、下移、左移、右移）来移动ListBox中的选项。该函数需要能够识别当前选中的选项，并将它们从源ListBox中移动到目标ListBox中。...
ListBox 左移右移
scjy127的专栏
08-13 1076
  //全选        private void all_Click(object sender, EventArgs e)        ...{                if (this.lstpcik.Items.Count == 0)                ...{                    return;                }    
ListBox控件实现上移、下移、循环上移、循环下移操作
hoho_12
04-10 4626
listbox控件实现上移、下移、循环上移和循环下移。
两个ListBox中的项互相移动及上下移动
黑鹰
04-01 977
导读]左右移动就是简单的选择项增加删除，上下移动使用了高级语法，值得一学  using System; using System.Collections.Generic; using System.Linq; using System.Text; using WinForm = System.Windows.Form
[唐胡璐]VS技巧 - 两个ListBox中的项左右移动
weixin_30483495的博客
01-16 111
实现如下图所示的功能：代码如下所示：///<summary> ///Moveoneormoreitemsfromlefttoright ///</summary> ///<paramname="sender"></param> ///<paramname="e"></p...
原创:在visual studio 2005 中制做 左右上下移动 的 Listbox ( asp.net , C#)
rootbin1的专栏
09-28 3307
制作可上下左右移动的 ListBox:方法:1.新建页面,拖放如下控件: 两个ListBox ,6个button,样式如下 各个button的功能>> 左移↑上移↓下移C全部清空>> 代码如下:protected void Button1_Click(object sender, EventArgs e)    {        try        {
Python列表方法
L_lemo004的博客
09-17 804
目录添加元素Python append()方法添加元素Python extend()方法添加元素Python insert()方法插入元素删除元素del：根据索引值删除元素pop()：根据索引值删除元素remove()：根据元素值进行删除clear()：删除列表所有元素修改元素修改单个元素修改一组元素查找元素index() 方法count()方法 添加元素 实际开发中，经常需要对 Python 列表进行更新，包括向列表中添加元素、修改表中元素以及删除元素。本节先来学习如何向列表中添加元素。 使用+运算符可以
BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模糊查询列表数据定位）...
apr16037的博客
08-19 1851
　　使用bootstrapTable实现数据左右移动的功能其实做过很多了，但原来实现的功能都是比较单一，都是选中单条数据进行移动。这次需要实现的功能比较全面，中间遇到不少的坑，此次正好在这里将所有的功能代码梳理一下。 实现以下功能： 1.选中单条数据进行左右移动 2.将列表中所有数据全部进行左右移动 3.左边的数据移动到右边后，为其增加一个序号列，并根据右侧列表的数据自动递增序号...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值