左select，右带checkbox的虚拟select互相移动

最新推荐文章于 2024-04-23 09:35:40 发布

吉普赛的歌

最新推荐文章于 2024-04-23 09:35:40 发布

阅读量1.6k

点赞数

分类专栏：前端 - jQuery插件文章标签： input class function table html div

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

版权

前端 - jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">      
<head>      
    <title></title>  
    <script src="jquery/jquery_1.3.js" type="text/javascript"></script>
    <script src="LRSelect.js" type="text/javascript"></script>  
    <style type="text/css">  
        .dataSelect  {color:black; background:white; font-family:verdana, arial, helvetica; font-size:11px;  BORDER-BOTTOM:#DDE3E6 solid 1px; BORDER-LEFT:#ADC3C6 solid 1px; BORDER-RIGHT:#DDE3E6 solid 1px; BORDER-TOP:#ADC3C6 solid 1px}  
        .ulVirtualSel {list-style-type:none;margin:0px;padding:0px;}  
        .ulVirtualSel input,.ulVirtualSel span{vertical-align:middle;cursor:default;}  
        .ulVirtualSel_Click {background-color:#0A246A;color:#FFFFFF;}  
    </style>  
    <script type="text/javascript">
        $(function () {
            $.fn.LSelect_RVSelect("selLeft", "ulVirtualSel", "img_L_AllTo_R", "img_L_To_R", "img_R_To_L", "img_R_AllTo_L", "chkItem", true, true);
        });      
    </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>  
                    <option value="5">5</option>      
                    <option value="6">6</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;" >       
                <div style="width:205px;height:330px;overflow-x:hidden;overflow-y:auto;" class="dataSelect" >  
                <ul id="ulVirtualSel" class="ulVirtualSel" >  
                    <li>  
                        <input name="chkItem" type="checkbox" value="a" /><span>A</span></li>  
                    <li>  
                        <input name="chkItem"" type="checkbox" value="b" /><span>B</span></li>  
                    <li>  
                        <input name="chkItem" type="checkbox"  value="c" /><span>C</span></li>  
                </ul>  
                </div>     
            </td>      
        </tr>      
    </table>  
</body>      
</html>

吉普赛的歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左select，右带checkbox的虚拟select互相移动

.dataSelect {color:black; background:white; font-family:verdana, arial, helvetica; font-size:11px; BORDER-BOTTOM:#DDE3E6 solid 1px; BORDER
复制链接

扫一扫