为了账号安全,请及时绑定邮箱和手机立即绑定

JQ实现左侧列表内容移动至右侧列表出现的问题

/ 猿问

JQ实现左侧列表内容移动至右侧列表出现的问题

Teddypedia 2018-04-04 22:11:43

部分代码如下

<script src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(function(){

//双击选中项,商品移动到右列表

$('#leftList option').dblclick(function(){

$('#leftList option:selected').appendTo('#rightList');

})

//双击选中项,商品移动到左列表

$('#rightList option').dblclick(function(){

$('#rightList option:selected').appendTo('#leftList'); 

})

//左侧全部商品移动至右侧

$('#allToRight').click(function(){

$('#leftList option').appendTo('#rightList');

})

//右侧所有商品移动到左边

$('#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">&gt;&gt;</a></p>

<p><a href="#" style="padding-left: 20px;" id="allToRight">&gt;&gt;&gt;</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">&lt;&lt;</a></p>

<p><a href="#" id="allToLeft">&lt;&lt;&lt;</a></p>

</span>

</body>

双击左侧下拉列表内容,添加到右侧列表后,再点击就不能回去了。右侧列表的也是,移动到左侧后不能双击事件返回,但是超链接的click事件全部移动又可以。

https://img3.mukewang.com/5ac4dd130001966006030454.jpg

查看完整描述

2 回答

?
qq_慕村4106160
//方法一:
$("#leftList").dblclick(function(){
	$("option:selected",this).appendTo($("#rightList"));
});				
$("#rightList").dblclick(function(){
	$("option:selected",this).appendTo($("#leftList"));
});					   				
//方法二:只要一个就行,至于为什么我也不懂。
$("#leftList option").dblclick(function(){
	var parentId = $(this).parent().prop("id");
	alert(parentId);
	if(parentId=="left"){
	    $(this).appendTo($("#rightList"));
	}else{
	    $(this).appendTo($("#leftList"));
	}
});


查看完整回答
反对 回复 2019-10-17
?
QQ_随意

你点击之后移过去的那个元素没有了点击事件,重新绑定点击事件就好了

查看完整回答
反对 回复 2018-04-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信