求用JS写的一个在2个listbox中互相移动内容的程序

感谢

解决方案 »

  1.   

    刚写的，你还可以在优化一下，因为两个onclick事件的方法体都是一样的， 可以合并。
    <html> 
    <head> 
    <title>my select</title> 
    <style>
    select{
    width: 120px;
    height: 120px;
    }
    </style>
    </head> 
    <body> 
    <select id="source" multiple="multiple">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3" selected="selected">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    </select>

    <select id="dest" multiple="multiple"> </select>

    <script>
    function $(id){return document.getElementById(id)};
    $("source").onclick = function(){
    var text = "";
    var value = "";
    var i = 0;
    for(i=0; i<this.options.length; i++){
    if(this.options[i].selected==true){
    text = this.options[i].text;
    value = this.options[i].value;
    break;
    }
    }
    this.removeChild(this.options[i]);
    var oOption = document.createElement("OPTION");
    oOption.text = text;
    oOption.value = value;
    $("dest").add(oOption);
    }

    $("dest").onclick = function(){
    var text = "";
    var value = "";
    var i = 0;
    for(i=0; i<this.options.length; i++){
    if(this.options[i].selected==true){
    text = this.options[i].text;
    value = this.options[i].value;
    break;
    }
    }
    this.removeChild(this.options[i]);
    var oOption = document.createElement("OPTION");
    oOption.text = text;
    oOption.value = value;
    $("source").add(oOption);
    }
    </script>
    </body> 
    </html>
      

  2.   

    function $(id){return document.getElementById(id)};
    使用$("param")代替document.getElementById(id)来获取id
      

  3.   

    script最开始我定义的函数，就是返回id对应的对象。
    function $(id){return document.getElementById(id)};
      

  4.   

    有一个小bug， 我修复了一下。
    <html> 
    <head> 
    <title>my select</title> 
    <style>
    select{
    width: 120px;
    height: 120px;
    }
    </style>
    </head> 
    <body> 
    <select id="source" multiple="multiple">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3" selected="selected">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    </select>

    <select id="dest" multiple="multiple"> </select>

    <script>
    function $(id){return document.getElementById(id)};
    $("source").onclick = function(){
    if(this.options.length==0){
    return;
    }
    var text = "";
    var value = "";
    var i = 0;
    for(i=0; i<this.options.length; i++){
    if(this.options[i].selected==true){
    text = this.options[i].text;
    value = this.options[i].value;
    break;
    }
    }
    this.removeChild(this.options[i]);
    var oOption = document.createElement("OPTION");
    oOption.text = text;
    oOption.value = value;
    $("dest").add(oOption);
    }

    $("dest").onclick = function(){
    if(this.options.length==0){
    return;
    }
    var text = "";
    var value = "";
    var i = 0;
    for(i=0; i<this.options.length; i++){
    if(this.options[i].selected==true){
    text = this.options[i].text;
    value = this.options[i].value;
    break;
    }
    }
    this.removeChild(this.options[i]);
    var oOption = document.createElement("OPTION");
    oOption.text = text;
    oOption.value = value;
    $("source").add(oOption);
    }
    </script>
    </body> 
    </html>