部分代碼如下<script src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ //雙擊選中項(xiàng),商品移動到右列表 $('#leftList option').dblclick(function(){ $('#leftList option:selected').appendTo('#rightList'); }) //雙擊選中項(xiàng),商品移動到左列表 $('#rightList option').dblclick(function(){ $('#rightList option:selected').appendTo('#leftList');? }) //左側(cè)全部商品移動至右側(cè) $('#allToRight').click(function(){ $('#leftList option').appendTo('#rightList'); }) //右側(cè)所有商品移動到左邊 $('#allToLeft').click(function(){ $('#rightList option').appendTo('#leftList'); }) }) </script><body><span style="float: left;"> <font color="green" face="宋體">已有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="leftList"> <option value="0">IPhone6s</option> <option value="1">小米4</option> <option value="2">錘子T2</option> </select> <p><a href="#" style="padding-left: 20px;" id="toRight">>></a></p> <p><a href="#" style="padding-left: 20px;" id="allToRight">>>></a></p> </span> <span style="float: right;"> <font color="red" face="宋體">未有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="rightList"> <option>三星Note3</option> <option>華為6s</option> </select> <p><a href="#" id="toLeft"><<</a></p> <p><a href="#" id="allToLeft"><<<</a></p> </span></body>雙擊左側(cè)下拉列表內(nèi)容,添加到右側(cè)列表后,再點(diǎn)擊就不能回去了。右側(cè)列表的也是,移動到左側(cè)后不能雙擊事件返回,但是超鏈接的click事件全部移動又可以。
JQ實(shí)現(xiàn)左側(cè)列表內(nèi)容移動至右側(cè)列表出現(xiàn)的問題
Teddypedia
2018-04-04 22:11:43