效果图如下：

代码如下：

<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. Android自定义下拉刷新

    网上的下拉刷新功能很多,不过基本上都是隐藏header的,而项目里面需要只隐藏部分的header,类似QQ好友动态的效果,修改了一些现有的,最后有很多问题,所以就自己自定义了一个,逻辑也很简单,首先就 ...

  2. Ecshop图片不清晰怎么办?

    很多人说缩略图的质量不高,模糊,那是因为gd库生成缩略图时,默认生成jpg缩略图或商品图的质量是75.可以通过修改生成缩略图质量的默认值来提高缩略图的质量. 找到includes/cls_image. ...

  3. Java的位运算符实例——与（&）、非（~）、或（|）、异或（^）

    一.Java的位运算符实例——与(&).非(~).或(|).异或(^) 1.与(&) 0 & 2 = 0 0 0 0 0 1 0 0 1 0 2.非(~) ~0 = 7 0 0 ...

  4. Java向PostgreSQL发送prepared statement 与 libpq 向PostgreSQL发送prepared statement之比较：

    Java 代码,在数据库端,并没有当成 prepared statetment 被处理. C代码通过libpq 访问数据库端,被当成了 prepared statement 处理.也许是因Postgr ...

  5. 【38】通过复合塑模出Has-A 或根据某物实现出

    1.什么是复合? 复合是类型之间的一种关系,某种类型的对象内含其他类型的对象. 2.为什么需要复合,他解决什么问题? 为了代码复用. 3.复合有两层含义:Has-A和根据某物实现出.在应用域中,表示H ...

  6. Codeforces Round #321 (Div. 2) E. Kefa and Watch 线段树hash

    E. Kefa and Watch Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/prob ...

  7. Android手机中获取手机号码和运营商信息

    代码如下: package com.pei.activity; import android.app.Activity; import android.os.Bundle; import androi ...

  8. android学习日记03--常用控件tabSpec/tabHost

    常用控件7.TabSpec和TabHost 比较常用的控件,感觉手机QQ的整体布局就是这个,只不过tab放在底部而已.TabSpec相当于浏览器的分页,而TabHost就相当于分页的集合TabSpec ...

  9. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  10. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...