jQuery实例select双向选择列表实例教程

作者：简简单单 2014-11-14

提示：您可以先修改部分代码再运行

<p>先看效果图：</p>
<p><a href="https://img.111com.net/get_pic/2014/11/14/20141114005444882.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2014/11/14/20141114005444882.jpg" alt='jQuery实例select双向选择列表实例教程'  /></a></p>
<p>完整代码如下所示：<br />
<br />
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1"  style="background:#FB7">
	  <tr>
		<td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td>
		<td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy5212')">复制代码</td>
	  </tr>
	  <tr>
		<td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5212><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br />
<HTML><br />
<HEAD><br />
<TITLE><br />
New Document<br />
</TITLE><br />
<META NAME="Generator" CONTENT="EditPlus"><br />
<META NAME="Author" CONTENT=""><br />
<META NAME="Keywords" CONTENT=""><br />
<META NAME="Description" CONTENT=""><br />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"><br />
</script><br />
<style><br />
.sel{width:150px;height:200px;} .btn{width:50px;font-weight:bold;font-size:14px;<br />
}<br />
</style><br />
</HEAD><br />
<BODY><br />
<table><br />
<tr><br />
<td><br />
<select multiple class="sel" id="sel_left"><br />
<option value="a"><br />
aaaaaaaaaaa<br />
</option><br />
<option value="b"><br />
bbbbbbbbbbb<br />
</option><br />
<option value="c"><br />
ccccccccccc<br />
</option><br />
<option value="d"><br />
ddddddddddd<br />
</option><br />
<option value="e"><br />
eeeeeeeeeee<br />
</option><br />
</select><br />
</td><br />
<td><br />
<p><br />
<button class="btn" id="btn_1"><br />
>><br />
</button><br />
</p><br />
<p><br />
<button class="btn" id="btn_2"><br />
><br />
</button><br />
</p><br />
<p><br />
<button class="btn" id="btn_3"><br />
<</button><br />
</p><br />
<p><br />
<button class="btn" id="btn_4"><br />
<<</button><br />
</p><br />
</td><br />
<td><br />
<select multiple class="sel" id="sel_right"><br />
<option value="f"><br />
fffffffffff<br />
</option><br />
</select><br />
</td><br />
</tr><br />
</table><br />
</BODY><br />
<br />
<br />
<script><br />
$(function() {<br />
$("#sel_left,#sel_right").bind("change", checkBtn);<br />
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click", clickBtn);<br />
checkBtn();<br />
});<br />
<br />
function checkBtn() {<br />
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled", "disabled");<br />
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled", "disabled");<br />
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled", "disabled");<br />
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled", "disabled");<br />
}<br />
<br />
function clickBtn(e) {<br />
if ("btn_1" == e.target.id) {<br />
jQuery("#sel_left>option").appendTo("#sel_right");<br />
} else if ("btn_2" == e.target.id) {<br />
jQuery("#sel_left option:selected").appendTo("#sel_right");<br />
} else if ("btn_3" == e.target.id) {<br />
jQuery("#sel_right option:selected").appendTo("#sel_left");<br />
} else if ("btn_4" == e.target.id) {<br />
jQuery("#sel_right>option").appendTo("#sel_left");<br />
}<br />
checkBtn();<br />
}<br />
</script><br />
</HTML></td>
	  </tr>
	</table></p></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

jQuery实例select双向选择列表实例教程

相关文章

精彩推荐