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

最新推荐文章于 2025-07-22 00:16:16 发布

iteye_20954

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量81

点赞数

文章标签： xhtml javascript ViewUI

本文介绍如何使用HTML和JS实现一个简单的虚拟选择器，包括选择器的基本结构、样式定义、事件监听和交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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