ListBox实现上移,下移,左移,右移的简单实例


Posted in Javascript onFebruary 13, 2014
<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++) {
                    if (e1.options[i].selected) {
                        var e = e1.options[i];
                        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))
                }
            }
        } 
    //--> 
    </script>
</body>
</html>
Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
JavaScript中的细节分析
Jun 30 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
js正则相关知识点专题
May 10 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
tsconfig.json配置详解
May 17 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 #Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 #Javascript
用Jquery实现滚动新闻
Feb 12 #Javascript
Jquery实现自定义tooltip示例代码
Feb 12 #Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 #Javascript
利用jquery写的左右轮播图特效
Feb 12 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
python的re模块应用实例
2014/09/26 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
乡镇干部先进事迹材料
2014/02/03 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server