select框右移-html 

<!DOCTYPE html>
<html>
<head>
<title>checkbox练习</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    window.onload = function() {
        /*
            关于功能实现
                            1.怎样可以让左边的一项移动到右边?
                                
                                怎样得到select中的选中项?
                                    select.options;----得到所有的option的数组.
                                    
                                    select有一个属性叫selectIndex。得到被选中项的索引.
                                    
                                    var option=select.options[select.selectIndex]----得到了被选中的项。
                                    
                                    rightSelect.add(option);
                                    
                            
         */

        //向右移动一个.
        document.getElementById("removeRightOnly").onclick = function() {
            //得到左边select中选中的项.
            var left = document.getElementById("left"); //得到左边的select
            var option = left.options[left.selectedIndex]; //得到左边选的项.

            document.getElementById("right").add(option);
        };

        /*
            2.怎样将左边的全部移动的右边。                            
            options得到全部，编列所有的，使用rightSelect.add将所有的添加到右边就可以。
         */
        document.getElementById("removeRightAll").onclick = function() {
            //得到左边的全部
            var left = document.getElementById("left"); 
            var ops=left.options; //得到左边全部的option
            
            //遍历每一个option，将其添加到右边.
            while(ops.length>0){
                
                document.getElementById("right").add(ops[0]);
            }
        };
    }
</script>


</head>

<body>
    <table align='center'>
        <tr>
            <td><select size="10" id="left">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                    <option>选项5</option>
                    <option>选项6</option>
                    <option>选项7</option>
                    <option>选项8</option>
                    <option>选项9</option>
            </select></td>
            <td><input type="button" value="--->" id="removeRightOnly"><br>
                <input type="button" value="===>" id="removeRightAll"><br>
                <input type="button" value="<---" id="removeLeftOnly"><br>
                <input type="button" value="<===" id="removeLeftAll"><br>
            </td>
            <td><select size="10" id="right">
                    <option>选项10</option>
            </select></td>
        </tr>
    </table>
</body>
</html>

 

posted @ 2014-12-29 23:08  小菜希  阅读(1276)  评论(0)    收藏  举报