效果图如下：

代码如下：

<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. 经验之巧妙的应用Map

    后台: @RequestMapping("/cmci/v_divide_check_add.do")    public String toDivideCheckAdd(HttpS ...

  2. SpringMVC（一）

    开始学习SpringMVC了,就写下每次学习的内容,以及自己的理解.方便以后回顾知道自己哪里好哪里不好~~~ 一.目录 1.主目录如此: 2.target目录 二.文件 1.主要用到的几个文件夹(如主 ...

  3. jQuery插件- Autocomplete应用详解

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...

  4. Oracle中的AS和IS

    Oracle中的AS和IS是ORACLE为了方便而设置的同义词基本上没有不同 . 使用规则: 1.在创建存储过程(PROCEDURE)/函数(FUNCTION),以及自定义类型(TPYE)和包(PAC ...

  5. DNS服务未响应的简单解决办法

    今天晚上下班回家,打开电脑,发现打不开网页了,同一个wifi环境下,我的手机是可以连接上的,网上搜了一大推,又是重启服务,又是重新填写dns服务地址,都不管用, 该怎么办呢??. 其实发现很简单,打开 ...

  6. java定时任务接口ScheduledExecutorService

    一.ScheduledExecutorService 设计思想 ScheduledExecutorService,是基于线程池设计的定时任务类,每个调度任务都会分配到线程池中的一个线程去执行,也就是说 ...

  7. linux修改文件权限和用户组管理小结

    如何在linux下修改组权限 chmod g+r path/file 加读权限 当前目录 chmod -R g+r path/file 加读权限 当前目录以及子目录 g-r 减读权限g+w 加写权限g ...

  8. Web API接口 安全验证

    在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...

  9. iOS利用视频做起始页

    一个好的引导页会使得用户体验大大提升,利用视频来做,可以更简单的达到优雅的效果.使用MediaPlayer.framework框架下的AVPlayerLayer,它和Core Animation紧密地 ...

  10. linux内核系统调用和标准C库函数的关系分析

    http://blog.csdn.net/skyflying2012/article/details/10044343