js 左边移动到右边插件

最新推荐文章于 2018-10-10 22:04:25 发布

chenweishaoxing

最新推荐文章于 2018-10-10 22:04:25 发布

阅读量563

点赞数

分类专栏： JS 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/chenweishaoxing/article/details/84476534

版权

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

http://www.csrcode.cn/article-3465-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery+css模拟select控件的左边移动到右边的功能丨芯晴网页特效丨CsrCode.Cn</title>

*{ margin:0; padding:0; font-size:12px;}

#wBox{ width:524px; float:left; margin:20px;}

#wBox ul{ border:1px solid #09F; width:168px; float:left; list-style:none; padding:10px; height:200px; overflow:auto;}

#wBox ul li{ border:1px solid #ccc; height:22px; line-height:22px; text-align:center; margin:3px; cursor:pointer;}

#wBox ul li.noSelect{ border-color:#000; background:#eee; color:#ccc; cursor:default;}

#wBox ul li.biaoji{ background:#FFC; border-color:#F90; font-weight:bold;}

#wBox ul#listBox1{ margin-right:10px;}

#wBox ul#listBox2{ float:right;}

button{ font-size:14px; padding:0 15px; margin:20px; display:block;}

.cf{ clear:both;}

</style>

$(function(){

//清空

var lival = "";

$('#liVal').val(lival);

//选择

$('#wBox li:not(".noSelect")').live('click',function(){

$(this).toggleClass('biaoji');

})

//添加

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

if($('#listBox1>li').hasClass('biaoji')){

var selectLi = $('#listBox1>li.biaoji');

var liHtml = "";

lival = $('#liVal').val();

for(var i=0; i<selectLi.length; i++){

liHtml += '<li>'+selectLi.eq(i).html()+'</li>';

lival += selectLi.eq(i).find('em:first').text()+',';

$('#liVal').val(lival);

selectLi.eq(i).remove();

}

$(liHtml).appendTo('#listBox2');

}else{

alert('请选择');

}

})

//移除

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

if($('#listBox2>li').hasClass('biaoji')){

var selectLi = $('#listBox2>li.biaoji');

var liHtml = "";

for(var i=0; i<selectLi.length; i++){

liHtml += '<li>'+selectLi.eq(i).html()+'</li>';

var liMove = selectLi.eq(i).find('em:first').text()+',';

liMove = $('#liVal').val().replace(liMove,'');

$('#liVal').val(liMove);

selectLi.eq(i).remove();

}

$(liHtml).appendTo('#listBox1');

}else{

alert('请选择');

}

})

});

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

<br><br><br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><br><br> 用到了比较多的CSS和JavaScript代码，有的地方是用select做的，<br>这个是用ul模拟的，不支持shift多选，只能一个一个点，取值是字符串的，<br>有兴趣的给改成数组的也行，希望各位多多指点。 <br><hr> <p align="center"><font color=black>本特效由 <a target="_blank" href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

chenweishaoxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 左边移动到右边插件

http://www.csrcode.cn/article-3465-1.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html...
复制链接

扫一扫

专栏目录