jQuery左右选择框
生活随笔
收集整理的這篇文章主要介紹了
jQuery左右选择框
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head>
<title>左右選擇框</title> <style type="text/css">
/*.s1{width:120px;}
#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}
#d2{height:30px;font-size:24px;background-color:blue;color:white;}
#d3{padding-left:30px;}*/
</style><script type="text/javascript" src="./jquery-1.4.3.js"></script>
</head>
<body> <div id="d1"><div id="d2">選擇</div><div id="d3"><table cellpadding="0" cellspacing="8"><tbody><tr><td>左</td><td> </td><td>右</td></tr><tr><td><select id="s1" name="s1" style="width:150px; height:220px;" multiple="multiple"><option value="hh">W1</option></select></td><td><p><input id="b1" type="button" class="s1" value="-->"></p><p><input type="button" id="b2" class="s1" value="-->>"></p><p><input type="button" id="b3" class="s1" value="<--"></p><p><input type="button" id="b4" class="s1" value="<<--"></p></td><td><select id="s2" name="s2" style="width:150px;height:220px;" multiple="multiple"><option value="zsf">12321</option><option value="xrr">23</option></select></td></tr></tbody></table></div>
</div><script type="text/javascript">$(function(){$('#b1').click(function(){$obj = $('select option:selected').clone(true);if($obj.size() == 0){alert("請(qǐng)至少選擇一條!");}$('#s2').append($obj);$('select option:selected').remove();});$('#b2').click(function(){$('#s2').append($('#s1 option'));});$('#b3').click(function(){$obj = $('select option:selected').clone(true);if($obj.size() == 0){alert("請(qǐng)至少選擇一條!");}$('#s1').append($obj);$('select option:selected').remove();});$('#b4').click(function(){$('#s1').append($('#s2 option'));});$('option').dblclick(function(){var flag = $(this).parent().attr('id');if(flag == "s1"){var $obj = $(this).clone(true);$('#s2').append($obj);$(this).remove();} else {var $obj = $(this).clone(true);$('#s1').append($obj);$(this).remove();}});});</script>
</body> </html>
引入jQuery即可
轉(zhuǎn)載于:https://www.cnblogs.com/moli-/p/6429946.html
總結(jié)
以上是生活随笔為你收集整理的jQuery左右选择框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python标准库
- 下一篇： HTML5学习笔记（十八）：闭包