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

作者：袖梨 2022-06-25

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

先看效果图：
<a href="https://img.111cn.net/uploads/20220926/img_63317267d952830.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220926/img_63317267d952830.jpg" alt="jQuery实例select双向选择列表实例教程"></a>
完整代码如下所示： 
 

<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">
 
 
 
<title>
 
New Document 
</title>
 
<meta name="Generator" content="EditPlus">
 
<meta name="Author" content="">
 
<meta name="Keywords" content="">
 
<meta name="Description" content="">
 
<script type="text/javascript" src="http://code.*jq*uer*y.com/jquery-1.4.2.min.js"> 
</script> 
<style> 
.sel{width:150px;height:200px;} .btn{width:50px;font-weight:bold;font-size:14px; 
} 
</style>
 
 
 
<table>
 
<tr>
 
<td>
 
<select multiple class="sel" id="sel_left"> 
<option value="a">
 
aaaaaaaaaaa 
</option>
 
<option value="b">
 
bbbbbbbbbbb 
</option>
 
<option value="c">
 
ccccccccccc 
</option>
 
<option value="d">
 
ddddddddddd 
</option>
 
<option value="e">
 
eeeeeeeeeee 
</option>
 
</select> 
</td>
 
<td>
 
 
<button class="btn" id="btn_1"> 
>> 
</button> 

 
 
<button class="btn" id="btn_2"> 
> 
</button> 

 
 
<button class="btn" id="btn_3"> 
 
</button>
 
 
<button class="btn" id="btn_4"> 
 
</button>
 
</td>
 
<td>
 
<select multiple class="sel" id="sel_right"> 
<option value="f">
 
fffffffffff 
</option>
 
</select> 
</td>
 
</tr>
 
</table>
 
 
 
 
<script> 
$(function() { 
$("#sel_left,#sel_right").bind("change", checkBtn); 
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click", clickBtn); 
checkBtn(); 
}); 
 
function checkBtn() { 
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled", "disabled"); 
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled", "disabled"); 
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled", "disabled"); 
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled", "disabled"); 
} 
 
function clickBtn(e) { 
if ("btn_1" == e.target.id) { 
jQuery("#sel_left>option").appendTo("#sel_right"); 
} else if ("btn_2" == e.target.id) { 
jQuery("#sel_left option:selected").appendTo("#sel_right"); 
} else if ("btn_3" == e.target.id) { 
jQuery("#sel_right option:selected").appendTo("#sel_left"); 
} else if ("btn_4" == e.target.id) { 
jQuery("#sel_right>option").appendTo("#sel_left"); 
} 
checkBtn(); 
} 
</script> 
</td>
	 </tr>
	</table>

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

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

相关文章

精彩推荐