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 相关文章推荐
jQuery圆形统计图开发实例
Jan 04 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
js仿淘宝放大镜效果
Dec 28 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四舍五入、取整、round函数使用示例
2015/02/06 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
ext jquery 简单比较
2010/04/07 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python连接数据库的方法
2017/10/19 Python
TensorFlow变量管理详解
2018/03/10 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
网游商务专员求职信
2013/10/15 职场文书
生物制药毕业生自荐信
2013/10/16 职场文书
小学学校评估方案
2014/06/08 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python