效果图如下：

代码如下：

<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. [iOS基础控件 - 6.3] 使用可视化连线方式指定dataSource、delegate

    对着要指定dataSource或者delegate的控件右击,然后拖动线到指定的控制器上

  2. js为表格添加行和列

    <table id="studentTable" align="center" border="1px;" cellpadding=& ...

  3. HDU 5493 Queue 树状数组

    Queue Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5493 Des ...

  4. HDU 5112 A Curious Matt 水题

    A Curious Matt Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid ...

  5. hdu 4104

    先排序,再动态规划.须要优化 #include<iostream> #include<cstdio> #include<cstring> #include<s ...

  6. 华为的JAVA面试题及答案（部分）

    华为的JAVA面试题 (后记:没有想到华为的面试题就是非同一般,非常多题不是一眼就行看得出来,至少对我这种鸟来说是这样.对我个人来说,看看这种题,可能比看<Think In Java>都还 ...

  7. [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  8. RapidXml用法

    一.写xml 文件 #include <iostream> #include "rapidxml/rapidxml.hpp" #include "rapidx ...

  9. Folder and jar

  10. C#_delegate - example

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...