search

Home  >  Article  >  Web Front-end  >  jquery makes select list bidirectional selection sample code_jquery

jquery makes select list bidirectional selection sample code_jquery

WBOY
WBOYOriginal
2016-05-16 16:37:541049browse

The select list made by jquery has two-way selection. The compatibility is definitely good. Friends who need it can learn from it

<!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 &#63; jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled"); 
jQuery("#sel_left option:selected").length > 0 &#63; jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled"); 
jQuery("#sel_right option:selected").length > 0 &#63; jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled"); 
jQuery("#sel_right>option").length > 0 &#63; 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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Cool and stylish menu navigation implemented with jquery and css3_jqueryNext article：Cool and stylish menu navigation implemented with jquery and css3_jquery

Related articles

See more