本文所分享的知识点是【jquery制作select列表双向选择示例代码】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
jquery制作select列表双向选择示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<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.jquery.com/jquery-1.4.2.min.js"></script>
<style>
.sel{width:150px;height:200px;}
.btn{width:50px;font-weight:bold;font-size:14px; }
</style>
</HEAD>
<BODY>
<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>
<p><button class="btn" id="btn_1">>> </button></p>
<p><button class="btn" id="btn_2">></button></p>
<p><button class="btn" id="btn_3"><</button></p>
<p><button class="btn" id="btn_4"><<</button></p>
</td>
<td>
<select multiple class="sel" id="sel_right">
<option value="f">fffffffffff</option>
</select>
</td>
</tr>
</table>
</BODY>
<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>
</HTML>
关于jquery制作select列表双向选择示例代码的相关讨论如下：
相关问题：JQuery应用：实现下拉列表选择一项，然后在第二个...
答：第一个在帮你做。 第二个。css没写好。。 $(function(){var arr=[{"水果":["苹果","西瓜","菠萝","梨子"],"蔬菜":["青菜","白菜","萝卜","辣椒"],"家电":["电视","冰箱","烤箱","洗衣机"],"数码":["手机","相机","MP3","iPod"]}];$('#select1').... >>详细
相关问题：jquery获取HTML select下拉列表中新选中option的va...
答：不需要重新刷新页面。新选中下拉列表（select）的选项（option）会触发change事件，即选择项改变事件，因此可以在change事件的响应函数中获取新选中option的value值，而不必要刷新页面。实例演示如下: 1、HTML结构 option-A option-Boption-C op... >>详细
相关问题：如何用jQuery生成有很多内容的下拉列表
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-