js移动listbox内容

最新推荐文章于 2024-09-13 17:21:46 发布

hlrcopyright

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量342

点赞数

文章标签： function html

<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>