用div做select multiple左右添加和删除功能

作者:norion时间:2012年9月4日评论次数:0 条

用div做select multiple左右添加和删除功能

图上那种左右添加和删除功能,网上很多例子都是用select做的,但是select在IE6下定义边框属性的时候总是那么不尽人意,于是我今天用div来实现select multiple左右添加和删除功能。

原理很简单,先用写鼠标多选事件,在点击鼠标的时候判断ctrl是否被按下:

$('#addStaff-roleListLeft div,#addStaff-roleListRight div').die().live('click',function(event){
	if($(this).hasClass('selected')){
		if(event.ctrlKey){
			$(this).removeClass('selected');
		}
	}else{
		if(!event.ctrlKey){
			$(this).addClass('selected').siblings().removeClass('selected');
		}else{
			$(this).addClass('selected');
		}
	}
});

然后,写点击选择和选择全部时的效果:

$('#addStaff-add').click(function(event){
	if( $('#addStaff-roleListLeft .selected').length>0 ){
		$("#addStaff-roleListLeft .selected").each(function(){
			$('#addStaff-roleListRight').append('<div>'+$(this).text()+'</div>');
			$(this).remove();
		});
	}else{
		alert("请选择要添加的分包!");
	}
});
$('#addStaff-addAll').click(function(event){
	if( $('#addStaff-roleListLeft div').length>0 ){
		$("#addStaff-roleListLeft div").each(function(){
			$('#addStaff-roleListRight').append('<div>'+$(this).text()+'</div>');
			$(this).remove();
		});
	}else{
		alert("请选择要添加的分包!");
	}
});

而删除的效果原理是一样的,这里就不多写了,其中不要漏掉html:

<div id="addStaff-roleListLeft">
    <div>sss</div>
    <div>sss</div>
    <div>sss</div>
</div>
<div id="addStaff-roleListBtn">
    <p id="addStaff-add">添加&gt;&gt;</p>
    <p id="addStaff-addAll">全部添加&gt;&gt;</p>
    <p id="addStaff-remove">&lt;&lt;删除</p>
    <p id="addStaff-removeAll">&lt;&lt;全部删除</p>
</div>
<div id="addStaff-roleListRight"><div>sss</div></div>

样式的话这里就不写了,以上代码能对打下有所帮助,如果有bug请以评论的形式反馈~~~

标签:

上一篇: 为wordpress添加个性的404页面

下一篇:过滤the_content()图片的链接地址

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注