JQuery----Demo----左右select选择

最新推荐文章于 2021-09-10 11:10:08 发布

ZHANGLIHAOOO

最新推荐文章于 2021-09-10 11:10:08 发布

阅读量387

点赞数

分类专栏： jQuery 文章标签： JQuery 左右选择 select

本文链接：https://blog.csdn.net/ZHANGLIHAOOO/article/details/79772545

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $("#left1").click(function(){
            $("#leftSelectId option:selected:first").removeAttr("selected").prependTo("#rightSelectId");
        });
        $("#left2").click(function(){
            $("#leftSelectId option:selected").removeAttr("selected").prependTo("#rightSelectId");
        });
        $("#left3").click(function(){
            $("#leftSelectId option").removeAttr("selected").prependTo("#rightSelectId");
        });
        
        
        $("#r3").click(function(){
            $("#rightSelectId option").removeAttr("selected").prependTo("#leftSelectId");
        });
    });
    
    </script>
    
    <style type="text/css">
        .textClass {
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
                    
                    <option>11</option>
                    <option>22</option>
                    <option>33</option>
                </select>
                
            </td>
            <td>
                <input id="left1" type="button" value=">" style="width:50px"/> <br/>
                <input id="left2" type="button" value=">>" style="width:50px"/> <br/>
                <input id="left3" type="button" value=">>>" style="width:50px"/> <br/>
                
                <input id="r1" type="button" value="<" style="width:50px"/> <br/>
                <input id="r2" type="button" value="<<" style="width:50px"/> <br/>
                <input id="r3" type="button" value="<<<" style="width:50px"/> <br/>
                
            </td>
            <td>
                <select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">
                    <option></option>
                </select>
                
            </td>
        </tr>
    </table>
        
</body>
</html>

ZHANGLIHAOOO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery----Demo----左右select选择

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; cha
复制链接

扫一扫