用js写两个列表数据转换并排序

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取并修改元素内容</title>
    <style>
        div{
            display:inline-block;
        }
        div button{
            display:block;
        }
        div select{
            width:100px;
            height:85px;
        }
    </style>
    <script>
        //定义全局变量
        var lsel=null; //左边select
        var rsel=null; //右边select
        var opt=null;  //全部的值
        window.$ = function(selector){
            return document.querySelectorAll(selector);
        };
        window.onload = function(){
            rsel = $("#rsel")[0];
            lsel = $("#lsel")[0];
            opt = lsel.innerHTML;
        };
        function move(btn){
            switch(btn.innerHTML){
                case ‘&gt;&gt;‘:    //按两个大于键
                    rsel.innerHTML = opt;
                    lsel.innerHTML = "";
                    break;
                case "&gt;":        //大于键
                    mo(lsel,rsel);
                    break;
                case "&lt;":        //小于键
                    mo(rsel,lsel);
                    break;
                case "&lt;&lt;":    //两个小于键
                    lsel.innerHTML = opt;
                    rsel.innerHTML = "";
                    break;
            }
        }
        function mo(sel,unsel){
            //定义两个空列表
            var pul = [];
            var pol = [];
            //将移出那边选中的和未选中的分开
            if(sel.length!=0 && sel.innerHTML!=""){
                for(var i=0;i<sel.length;i++){
                    sel[i].selected?
                            pul.push(sel[i].innerHTML):
                            pol.push(sel[i].innerHTML);
                }
            }
            //将选中的加入移入的框内
            for(var j=0;j<unsel.length;j++){
                pul.push(unsel[j].innerHTML);
            }
            if(pul.sort()[0]==""){pul.shift()};

            //将两部分分别归位
            sel.innerHTML = "<option>" + pol.sort().join("</option><option>") + "</option>";
            unsel.innerHTML = "<option>" + pul.sort().join("</option><option>") + "</option>";
        }

    </script>
</head>
<body>
<div>
    <select id="lsel" size="5" multiple>
        <option>Argentina</option>
        <option>Brazil</option>
        <option>Canada</option>
        <option>Chile</option>
        <option>China</option>
        <option>Cuba</option>
        <option>Denmark</option>
        <option>Egypt</option>
        <option>France</option>
        <option>Greece</option>
        <option>Spain</option>
    </select>
</div>
<div>
    <button onclick="move(this)">&gt;&gt;</button>
    <button onclick="move(this)">&gt;</button>
    <button onclick="move(this)">&lt;</button>
    <button onclick="move(this)">&lt;&lt;</button>
</div>
<div>
    <select id="rsel" size="5" multiple></select>
</div>
</body>
</html>

时间： 2024-10-27 11:16:03

用js写两个列表数据转换并排序的相关文章

js写一个通讯录

模拟通讯录列表功能我们手机上面的通讯录列表里面都有根据右侧的字母跳滚动到该字母的第一个名单地方. 于是我把这个功能拆分成两个功能区思考: 第一个是如何把这些名字的的汉字首字母提取出来,并且把相同字母的汉字归类,最后显示成列表. 第二是右侧字母导航,它需要一直固定在右侧,并且我按一个字母,屏幕最中间会弹出一个字母方框,代表我选中了这个字母. 我首先去实现第一个问题,如何提取名字中第一个汉字的首字母? 我去尝试过许多种方法,其中尝试过使用localeCompare(),我也成功的排序了,但是我发现

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; return ajax = function (url, options) { if (typeof url

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

python 如何在一个for循环中遍历两个列表

是我在看<笨方法学python>过程中发现有一行代码看不懂——“ for sentence in snippet, phrase:”,所以研究了半天,感觉挺有收获的.所以就放在博客上分享给大家了. 直入主题: 为了不耽误大家时间,如果知道以下为两段代码为什么输出不一样的话我觉得您肯定知道我下面要说的是什么了,您就不必花时间再读下去了. 1和2两段代码的区别是print在for循环中,另外一个是不在循环中.输出的结果却截然不同,如果想要弄懂如何遍历两列表,花些时间把下面的几行代码弄懂.我要说的您

JS写小游戏（一）：游戏框架

前言前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述一般,小游戏都要关注两个问题:刷新和交互.因为游戏一般是动态的,所以需要不断刷新.JavaScript是单线程,如果用C语言写过贪吃蛇之类的小游戏,应该知道,单线程一般是挂起一个时间来达到动态效果.比如C语言的Sleep(),JS的setInterval()等.但是js还有一种更高性能的方法req

css,js写的简易的tab导航

简易tab导航作为前端新手,看着别人写的tab导航代码,自己想模仿却总是忘记.于是这次自己利用css,js写了简易的tab导航,话不多说,上代码,首先是html和css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style type="tex

用原生JS写移动动画案例及实际应用

js很强大相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的左边或右边会有个分享的框,鼠标放上去就还移出一个列表,里面是要分享的地址.鼠标移开,就会移进去. 要实现这个效果要怎么做呢? 可以想一想,鼠标经过和鼠标离开很好理解用onmousemove事件和onmouseout事件就能完成. 那移动动画呢?我们可以一步一步思考, 首先,一开始是这样的完成移动

python中实现两个列表同时输出元素的方法zip

记:这个问题其实曾经在群里向一些同学求教过,但是在后来的写程序的过程,又把这个方法忘记了,所以今天在这里把这个问题说明下,以免下次再犯同样的问题! 假设有两个列表 a = [1,2,3,4,5,], b = [6,7,8,9,10],现在要求分别从这两个列表中输出元素,则可以使用for循环来实现这个功能程序: for item1, item2 in zip(a, b): print "a:%s, b:%s" %(item1, item2) 结果如下: a:1 ,b:6 a:2 ,b:

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------