jquery實(shí)現(xiàn)下拉框左右選擇功能
更新時(shí)間：2017年02月21日 14:44:03 作者：冷戰(zhàn)
本文主要介紹了jquery實(shí)現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
1、說(shuō)明
本文demo實(shí)現(xiàn)下拉框左右選擇
2、代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.centent
{
width: 260px;
}
.cententl
{
float: left;
}
.btnAdd
{
float: left;
padding:30px 5px;
}
</style>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//移到右邊
$('#btnAdd').click(function () {
//獲取選中的選項(xiàng)，刪除自己并追加給對(duì)方
$('#select1 option:selected').appendTo('#select2');
});
//移到左邊
$('#btnDel').click(function () {
//獲取選中的選項(xiàng)，刪除自己并追加給對(duì)方
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右邊
$('#btnAdds').click(function () {
//獲取全部的選項(xiàng),刪除自己并追加給對(duì)方
$('#select1 option').appendTo('#select2');
});
//全部移到左邊
$('#btnDels').click(function () {
//獲取全部的選項(xiàng),刪除自己并追加給對(duì)方
$('#select2 option').appendTo('#select1');
});
//雙擊選項(xiàng)
$('#select1').dblclick(function () {
//獲取雙擊的選項(xiàng),刪除自己并追加給對(duì)方
$("option:selected", this).appendTo('#select2');
});
//雙擊選項(xiàng)
$('#select2').dblclick(function () {
//獲取雙擊的選項(xiàng),刪除自己并追加給對(duì)方
$("option:selected", this).appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="centent">
<div class="cententl">
<select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
<option value="1">課程1</option>
<option value="2">課程2</option>
<option value="3">課程3</option>
<option value="4">課程4</option>
<option value="5">課程5</option>
<option value="6">課程6</option>
<option value="7">課程7</option>
<option value="8">課程8</option>
</select>
</div>
<div class="btnAdd">
<input type="button" id="btnAdd" value=" > " /><br />
<input type="button" id="btnDel" value=" < " /><br />
<input type="button" id="btnAdds" value=">>" /><br />
<input type="button" id="btnDels" value="<<" />
</div>
<div>
<select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
</select>
</div>
</div>
</body>
</html>
圖（1）
圖（2）
圖（3）
3、Demo
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
jquery垂直公告滾動(dòng)實(shí)現(xiàn)代碼
公告滾動(dòng)想必大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)方法也有很多，下面為大家介紹使用jquery實(shí)現(xiàn)垂直公告滾動(dòng)，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
Jquery中children與find之間的區(qū)別詳細(xì)解析
這篇文章主要是對(duì)Jquery中children與find之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件控制頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery Migrate是應(yīng)用遷移輔助插件，是用于高級(jí)版本兼容低級(jí)版本輔助插件。這篇文章主要介紹了jQuery Migrate 插件用法 ,需要的朋友可以參考下2019-05-05
基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼
這篇文章主要為大家介紹了基于jquery實(shí)現(xiàn)的仿優(yōu)酷圖片輪播特效代碼，感興趣的小伙伴們可以參考一下2016-01-01
關(guān)于JavaScript和jQuery的類型判斷詳解
下面小編就為大家?guī)?lái)一篇淺談JavaScript和jQuery的類型判斷。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的輪播圖相關(guān)功能實(shí)現(xiàn)、樣式設(shè)置與注意事項(xiàng),需要的朋友可以參考下2023-05-05
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)，文中通過(guò)示例代碼詳細(xì)的介紹了$.ajax()的用法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
jQuery.trim() 函數(shù)及trim()用法詳解
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符。jquery trim函數(shù)應(yīng)用非常廣泛，下面小編給大家講解jquery.trim（）函數(shù)及trim()用法詳解，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Jquery實(shí)現(xiàn)縱向橫向菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01