jQuery插件DIY：设置左右select的option的互相移动

最新推荐文章于 2020-11-21 20:22:32 发布

吉普赛的歌

最新推荐文章于 2020-11-21 20:22:32 发布

阅读量2.2k

点赞数

分类专栏： # jQuery插件文章标签： jquery插件 class function table html

本文链接：https://blog.csdn.net/yenange/article/details/6702263

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
    <title></title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="LRSelect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.fn.LRSelect("selLeft", "selRight", "img_L_AllTo_R", "img_L_To_R", "img_R_To_L", "img_R_AllTo_L");
            $.fn.UpDownSelOption("imgUp", "imgDown", "selRight");
        });    
    </script>    
</head>    
<body>    
    <table cellpadding="0" cellspacing="0" >    
        <tr>    
            <td style="vertical-align:bottom;" >    
                <select id="selLeft" multiple="multiple" style="width:205px;height:330px" class="dataSelect" >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>    
            </td>    
            <td style="width:30px;text-align:center;">    
                <img id="img_L_AllTo_R" alt=">|" src="" />    
                <img id="img_L_To_R"    alt=">"  src="" /><br />    
                <img id="img_R_To_L"    alt="<"  src="" /><br />    
                <img id="img_R_AllTo_L" alt="|<" src="" /><br />    
            </td>    
            <td style="vertical-align:bottom;" >     
                <select id="selRight" multiple="multiple" style="width:205px;height:330px" class="dataSelect" >
                    <option value="5">5</option>    
                    <option value="6">6</option> 
                </select>     
            </td>    
            <td style="width:30px;text-align:center;">    
                <img id="imgUp" alt="∧" src="" /><br />  
                <img id="imgDown"    alt="∨"  src="" />  
            </td>  
        </tr>    
    </table>
</body>    
</html>