效果图如下：

代码如下：

<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" ondblclick="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=">>" onclick="moveOption(document.myform.list1, document.myform.list2)"><br />

                <br />

                <input type="button" value="<<" onclick="moveOption(document.myform.list2, document.myform.list1)">

            </td>

            <td width="40%">

                <select style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">

                </select>

            </td>

            <td>

                <button onclick="changepos(list2,-1)" type="button">

                    ∧</button>

                <br />

                <button onclick="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++) {

                        var e = e1.options[i];

                    if (e1.options[i].selected&& OptionExists(e2, e.value)) {

                        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))

                }

            }

        }

    //查询是否已经存在

    function OptionExists(list, optValue) {

        var find = true;

        for (i = 0; i < list.options.length; i++) {

            if (list.options[i].value == optValue) {

                find = false;

                break;

            }

        }

        return find;

    }

    </script>

</body>

</html>

Javascript版选择下拉菜单互移且排序的更多相关文章

  1. 禁用jQuery chosen的选择下拉菜单

    想法是启用被勾掉之后,左侧下拉框禁用.这是chosen()的 disabled之后需要更新一下.就这样,还有别的方法的话请分享,O(∩_∩)O哈哈~

  2. WPF 多项选择下拉菜单

    背景 项目中有一个多项选择筛选的功能, 由于筛选条件太多, 用户又习惯在平板上进行操作, 所以要求我们把checkbox 放到一个combobox里面, 然后checkbox的选项要在combobox ...

  3. javascript 模拟选择下拉框的某一个option元素的效果

    需要在单元测试模拟它,百度谷歌了好久都没有.后来认真想想,还是找到办法了.因为我们手动交互某一行为,首先是让它的某些属性发生变化,其次是让它触发某事件.想明白这一点就简单了.让属性发生变化,当然是改动 ...

  4. 9.jQuery之简洁版滑动下拉菜单

    知识点:hover的使用,已经slideToggle的切换效果 <style> * { margin: 0; padding: 0; } li { list-style-type: non ...

  5. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  6. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  7. Android ActionBar中的下拉菜单

    在ActionBar中添加下拉菜单,主要有一下几个关键步骤: 1. 生成一个SpinnerAdapter,设置ActionBar的下拉菜单的菜单项 2. 实现ActionBar.OnNavigatio ...

  8. ExtJs 下拉菜单分页工具插件 代码分析

    Ext.ns("Ext.ux"); //创建插件对象 Ext.ux.PageSizePlugin = function(){ //调用父对象的构造方法,并为此插件生成一个预定义st ...

  9. Python+Selenium笔记（八）：操作下拉菜单

    (一) Select类 Select类是selenium的一个特定的类,用来与下拉菜单和列表交互. 下拉菜单和列表是通过HTML的<select> 元素实现的.选择项是通过<sele ...

随机推荐

  1. JQuery上传插件Uploadify API详解

    一.相关key值介绍uploader:uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. scrip ...

  2. centos6下安装部署hadoop2.2

    环境准备1.操作系统:centos6.0 64位2.hadoop版本:hahadoop-2.2.0 安装和配置步骤具体如下:1.主机和ip分配如下     ip地址                  ...

  3. C++ “读取位置 0x****** 时发生访问冲突”的可能原因

    转自:http://shansun123.iteye.com/blog/680066 这种错误的意思一般是指访问了不属于自己的内存空间,出现这种错误有几种原因: 1.给一个数组分配了比较小的内存空间, ...

  4. iOS开发- 文件共享(利用iTunes导入文件, 并且显示已有文件)

    实现过程: 1.在应用程序的Info.plist文件中添加Application supports iTunes file sharing键,并将键值设置为YES. - (void)viewDidLo ...

  5. 一个方便的shell命令，查看软件安装目录

    查看软件安装路径:whereis phpfind / -name nginx.configfind 查找 / 从根目录 -name 文件查找

  6. 较具体的介绍JNI

    JNI事实上是Java Native Interface的简称,也就是java本地接口.它提供了若干的API实现了和Java和其它语言的通信(主要是C&C++).或许不少人认为Java已经足够 ...

  7. Linux上安装JDK环境变量配置

    http://blog.chinaunix.net/uid-12115233-id-3304951.html Jdk: jdk-6u1-linux-i586 Tomcat: apache-tomcat ...

  8. 未打开Ad Hoc Distributed Queries

    SSAS访问ORACLE数据仓库读取数据创建CUBE的时候报如下错误: SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT 'Open ...

  9. Jordan Lecture Note-5: Kernels

    Kernels 我们首先来回顾kernel函数的定义:一个函数$K(x,y)$为kernel函数当且仅当对$\forall g, \int K(x,y)g(x)g(y)dxdy\geq 0$成立.另外 ...

  10. 【转】在XCode工程中创建bundle包

    http://www.giser.net/?p=859 Bundle Programming Guide: https://developer.apple.com/library/ios/docume ...