效果图如下：

代码如下：

<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. 关于UIImage类的对象两种初始化方法的区别

    1.imageNamed: UIImage *image = [UIImage imageNamed:"]; UIImage的类方法 第一次读取图片的时候,先把这个图片放到缓存中,下次再使用 ...

  2. Activity详解

    Activity是android应用的重要组成单元之一(另外3个是Service,BroadcastReceiver和ContentProvider).实际应用包含了多个Activity,不同的Act ...

  3. 第1组UI组件：布局管理器

    1 布局管理的来源 为了让UI在不同的手机屏幕上都能运行良好----不同手机屏幕的分辨率/尺寸并不完全相同,如果让程序手动控制每个组件的大小.位置,会给编程带来巨大的麻烦.为了解决这个问题.andro ...

  4. 【转载】总结一下Android中主题(Theme)的正确玩法

    http://www.cnblogs.com/zhouyou96/p/5323138.html 总结一下Android中主题(Theme)的正确玩法 在AndroidManifest.xml文件中有& ...

  5. 对PostgreSQL cmin和cmax的理解

    看例子: 开两个终端来对比: 在终端A: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# b ...

  6. linux和windows文件名称长度限制

    Linux文件名称的长度限制是255个字符 windows下全然限定文件名称必须少于260个字符,文件夹名必须小于248个字符. linux下文件数.文件夹数.文件名称长度的各种限制 下面測试都是在没 ...

  7. KeyTweak 键盘按键功能修改

    最近一致再用ThinkPad S3,悲剧的是上翻页和下翻页竟然和方向键在一起,经常按错光标不知道去哪里了. 实在忍受不了,竟然有这样的软件,哈哈. KeyTweak,用起来太方便了

  8. iOS－推送通知

    推送通知可以做3件事:(1)文字信息(2)一种声音 (3)一个徽章的标记号(第几条消息..) 推送通知流程  (app应用程序--->iOS 设备--->APNS(apple服务器)--- ...

  9. 【甘道夫】HBase基本数据操作的详细说明【完整版，精绝】

    介绍 之前具体写了一篇HBase过滤器的文章.今天把基础的表和数据相关操作补上. 本文档參考最新(截止2014年7月16日)的官方Ref Guide.Developer API编写. 全部代码均基于& ...

  10. 如何在mac上創建txt文档

    文件編輯(Mac下的記事本),shift + command + T 進入純文字編輯模式!