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

最新推荐文章于 2019-07-18 08:10:39 发布
最新推荐文章于 2019-07-18 08:10:39 发布
阅读量150 收藏
点赞数
原文链接：http://www.cnblogs.com/smartsmile/archive/2012/09/06/6234430.html
版权 
<html>
<head>
    <title>Javascript版选择下拉菜单互移且排序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
    <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
    <form method="post" name="myform">
    <table border="0" width="300">
        <tr>
            <td width="40%">
                <select style="width:100px; height:200px" multiple name="list1" size="12" οndblclick="moveOption(document.myform.list1, document.myform.list2)">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="山东">山东</option>
                    <option value="安徽">安徽</option>
                    <option value="重庆">重庆</option>
                    <option value="福建">福建</option>
                    <option value="甘肃">甘肃</option>
                    <option value="广东">广东</option>
                    <option value="广西">广西</option>
                    <option value="贵州">贵州</option>
                    <option value="海南">海南</option>
                    <option value="河北">河北</option>
                    <option value="黑龙江">黑龙江</option>
                    <option value="河南">河南</option>
                    <option value="湖北">湖北</option>
                    <option value="湖南">湖南</option>
                    <option value="内蒙古">内蒙古</option>
                    <option value="江苏">江苏</option>
                    <option value="江西">江西</option>
                    <option value="吉林">吉林</option>
                    <option value="辽宁">辽宁</option>
                    <option value="宁夏">宁夏</option>
                    <option value="青海">青海</option>
                    <option value="山西">山西</option>
                    <option value="陕西">陕西</option>
                    <option value="四川">四川</option>
                    <option value="天津">天津</option>
                    <option value="西藏">西藏</option>
                    <option value="新疆">新疆</option>
                    <option value="云南">云南</option>
                    <option value="浙江">浙江</option>
                    <option value="香港">香港</option>
                    <option value="澳门">澳门</option>
                    <option value="台湾">台湾</option>
                    <option value="其他">其他</option>
                </select>
            </td>
            <td width="20%" align="center">
                <input type="button" value=">>" οnclick="moveOption(document.myform.list1, document.myform.list2)"><br />
                <br />
                <input type="button" value="<<" οnclick="moveOption(document.myform.list2, document.myform.list1)">
            </td>
            <td width="40%">
                <select style="width:100px; height:200px" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
                </select>
            </td>
            <td>
                <button οnclick="changepos(list2,-1)" type="button">
                    ∧</button>
                <br />
                <button οnclick="changepos(list2,1)" type="button">
                    ∨</button>
            </td>
        </tr>
    </table>
    值：<input type="text" name="city" size="40">
    </form>
    <script language="JavaScript"> 
    <!--
        function moveOption(e1, e2) {
            try {
                for (var i = 0; i < e1.options.length; i++) {
                    if (e1.options[i].selected) {
                        var e = e1.options[i];
                        e2.options.add(new Option(e.text, e.value));
                        e1.remove(i);
                        i = i - 1
                    }
                }
                document.myform.city.value = getvalue(document.myform.list2);
            }
            catch (e) { }
        }

        function getvalue(geto) {
            var allvalue = "";
            for (var i = 0; i < geto.options.length; i++) {
                allvalue += geto.options[i].value + ",";
            }
            return allvalue;
        }

        function changepos(obj, index) {
            if (index == -1) {
                if (obj.selectedIndex > 0) {
                    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))
                }
            }
            else if (index == 1) {
                if (obj.selectedIndex < obj.options.length - 1) {
                    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))
                }
            }
        } 
    //--> 
    </script>
</body>
</html>


<html>  
<head>  
    <title>Jquery版选择下拉菜单互移且排序</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
	<script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
</head>  
<body>  
    <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>  
    <form method="post" name="myform">  
    <table border="0" width="300">  
        <tr>  
            <td width="40%">  
                <select style="width:100px; height:200px"  multiple name="list1" id="list1"  οndblclick="ListBox_Move('list1','list2')">  
                    <option value="北京">北京</option>  
                    <option value="上海">上海</option>  
                    <option value="山东">山东</option>  
                    <option value="安徽">安徽</option>  
                    <option value="重庆">重庆</option>  
                    <option value="福建">福建</option>  
                    <option value="甘肃">甘肃</option>  
                    <option value="广东">广东</option>  
                    <option value="广西">广西</option>  
                    <option value="贵州">贵州</option>  
                    <option value="海南">海南</option>  
                    <option value="河北">河北</option>  
                    <option value="黑龙江">黑龙江</option>  
                    <option value="河南">河南</option>  
                    <option value="湖北">湖北</option>  
                    <option value="湖南">湖南</option>  
                    <option value="内蒙古">内蒙古</option>  
                    <option value="江苏">江苏</option>  
                    <option value="江西">江西</option>  
                    <option value="吉林">吉林</option>  
                    <option value="辽宁">辽宁</option>  
                    <option value="宁夏">宁夏</option>  
                    <option value="青海">青海</option>  
                    <option value="山西">山西</option>  
                    <option value="陕西">陕西</option>  
                    <option value="四川">四川</option>  
                    <option value="天津">天津</option>  
                    <option value="西藏">西藏</option>  
                    <option value="新疆">新疆</option>  
                    <option value="云南">云南</option>  
                    <option value="浙江">浙江</option>  
                    <option value="香港">香港</option>  
                    <option value="澳门">澳门</option>  
                    <option value="台湾">台湾</option>  
                    <option value="其他">其他</option>  
                </select>  
            </td>  
            <td width="20%" align="center">  
                <input type="button" value=">>" οnclick="ListBox_Move('list1','list2')"><br />  
                <br />  
                <input type="button" value="<<" οnclick="ListBox_Move('list2','list1')">  
            </td>  
            <td width="40%">  
                <select style="width:100px; height:200px"  multiple name="list2" id="list2"  οndblclick="ListBox_Move('list2','list1')">  
                </select>  
            </td>  
            <td>  
                <button οnclick="ListBox_Order('list2','up')" type="button">  
                    ∧</button>  
                <br />  
                <button οnclick="ListBox_Order('list2','down')" type="button">  
                    ∨</button>  
            </td>  
        </tr>  
    </table>  
    值：<input type="text" name="city" size="40">  
    </form>  
    <script language="JavaScript">    
	function ListBox_Move(listfrom,listto)
	{
		var size = $("#" + listfrom + " option").size();
		var selsize = $("#" + listfrom + " option:selected").size();
		if(size>0 && selsize>0)
		{
			$.each($("#"+listfrom+" option:selected"), function(i,own){
				$(own).appendTo($("#" + listto));
				$("#" + listfrom + "").children("option:first").attr("selected",true); 
			});
		}
	}

	function ListBox_Order(ListName,action)
	{
		var size = $("#"+ListName+" option").size();
		var selsize = $("#"+ListName+" option:selected").size();
		if(size > 0 && selsize > 0)
		{
			$.each($("#"+ListName+" option:selected"),function(i,own){
				if(action == "up")
				{
					$(own).prev().insertAfter($(own));
				}
				else if(action == "down")//down时选中多个连靠则操作没效果
				{
					$(own).next().insertBefore($(own));
				}
			})
		}
	}
    </script>  
</body>  
</html>

转载于:https://www.cnblogs.com/smartsmile/archive/2012/09/06/6234430.html

diehe5608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ListBox 左移右移
scjy127的专栏
08-13 1046
  //全选        private void all_Click(object sender, EventArgs e)        ...{                if (this.lstpcik.Items.Count == 0)                ...{                    return;                }    
ListBox 实现左移右移
suoxl的专栏
07-15 804
listbox and combobox//*****************************************************************************************start...function rightRemove(){     var oSelectCode=document.getElementById("selectCo
ListBox实现上移,下移,左移,右移的简单实例
09-04
主要介绍了ListBox实现上移,下移,左移,右移的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
10-18
主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移操作功能,涉及javascript与jQuery的事件响应、页面元素动态操作等相关实现技巧,需要的朋友可以参考下
WPF ListBox实现上移下移功能
10-16
实现上移下移功能，具体绑定一个数据源，操作数据源，最后把数据源赋值给数据源。
ListBox动态添加数据删除数据和上移下移
07-20
ListBox动态添加数据删除数据和上移下移， 无刷新。
C# ListBox 左移、右移、上移、下移
weixin_30357231的博客
09-29 710
C# ListBox 左移、右移、上移、下移 2012-11-17 22:53:45|分类：技术研讨|标签：listbox|字号订阅 /// <summary> /// /// </summary> /// <param name="sender...
2个Listbox 之间数据的左右移动，及上下移动
weixin_30559481的博客
08-23 454
基本情况 效果图： 左移效果： 其余效果：右边的listbox进行上下移动。 listbox的属性设置为：Multiple 解决方案（一）： 调试结果：PASS (√) Code 1 2publicpartialclassDefault10:System.Web.UI.Page 3{ 4protectedvoidPa...
js实现数组内数据的上移和下移的实例
10-19
下面小编就为大家带来一篇js实现数组内数据的上移和下移的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ListBox控件实现上移、下移、循环上移、循环下移操作
hoho_12
04-10 4603
listbox控件实现上移、下移、循环上移和循环下移。
ListBox内容左右移动
weixin_44588370的博客
07-18 1084
页面布局如下： public Form1() { InitializeComponent(); LeftList.Items.Clear();//先是把左边的ListBox的内容清空 string[] LeftStr = new string[] { "苹果", "香蕉", "荔枝"...
ListBox(上移,下移,左移,右移)
johncools的博客
07-18 1636
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选中的项进行上下移动
yhj198927的博客
10-15 3269
///         /// 向上向下移动元素         ///         /// 需要操作的ListBox         /// 判断向上还是向下移动元素；true，向上；false，向下         ///         public static bool MoveSelectedItems(this ListBox listBox, bool isU
wpf listbox 选中项 上移下移
weixin_33836874的博客
09-21 512
原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e)         {             DataRowView rowView = this.listScrip.Sele...
wpf mvvm实现 listbox上移下移
最新发布
06-04
在 WPF MVVM 中，可以通过使用 `ICommand` 和 `RelayCommand` 来实现 `ListBox` 中的上移和下移操作。 以下是一个实现上移和下移功能的示例代码： 1. 在视图模型中，创建一个 `ObservableCollection` 来存储列表项...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值