jQuery實(shí)現(xiàn)下拉框左右移動(dòng)（全部移動(dòng)，已選移動(dòng)）
更新時(shí)間：2016年04月15日 11:35:44 作者：ylbtech
本文主要介紹jQuery中利用appendTo()方法追加元素已實(shí)現(xiàn)左右移動(dòng)的功能，希望對(duì)大家有所幫助。
用到的方法為：appendTo()
格式：$(content).appendTo(selector)
appendTo() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。
click() 方法觸發(fā) click 事件，或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。
看一下具體實(shí)現(xiàn)的代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
//1,方式一
// var $option = $("#select1 option:selected"); //獲取選中的選項(xiàng)
// var $remove = $option.remove(); //刪除下拉列表中選中的選項(xiàng)
// $remove.appendTo("#select2"); //追加給對(duì)方
//2，方式二
var $option = $("#select1 option:selected"); //獲取選中的選項(xiàng)
$option.appendTo("#select2"); //追加給對(duì)方
});
$("#add_all").click(function () {
var $option = $("#select1 option");
$option.appendTo("#select2");
});
$("#remove").click(function () {
var $option = $("#select2 option:selected");
$option.appendTo("#select1");
});
$("#remove_all").click(function () {
var $option = $("#select2 option");
$option.appendTo("#select1");
});
});
</script>
</head>
<body>
<h3>下拉框應(yīng)用</h3>
<table>
<tr>
<td>
<select id="select1" multiple="multiple" style="width:100px;">
<option value="News">News</option>
<option value="Sport">Sport</option>
<option value="Education">Education</option>
<option value="Technology">Technology</option>
<option value="Art">Art</option>
</select>
</td>
<td>
<button id="add">
>|</button><br />
<button id="add_all">
>></button><br />
<button id="remove_all">
<<</button><br />
<button id="remove">
|<</button>
</td>
<td>
<select id="select2" multiple="multiple" style="width:100px;">
</select>
</td>
</tr>
</table>
</body>
</html>
運(yùn)行效果：
您可能感興趣的文章:
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
- jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表示例
- jquery實(shí)現(xiàn)列表上下移動(dòng)功能
- jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
- jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
- jQuery讓控件左右移動(dòng)的三種實(shí)現(xiàn)方法
- jQuery slider Content(左右控制移動(dòng))
- 基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
- Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
相關(guān)文章
用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
下面小編就為大家?guī)?lái)一篇用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果
js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果，需要的朋友可以參考下2012-10-10
jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)凍結(jié)表頭的方法,實(shí)例分析了jQuery擴(kuò)展方法的實(shí)現(xiàn)技巧及固定表格樣式的方法,需要的朋友可以參考下2015-03-03
30個(gè)讓人興奮的視差滾動(dòng)（Parallax Scrolling）效果網(wǎng)站
視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。作為今年網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來(lái)越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。今天這篇文章就與大家分享30個(gè)視差滾動(dòng)效果的網(wǎng)頁(yè)設(shè)計(jì)作品，一起欣賞（以拖動(dòng)滾動(dòng)條方式瀏覽效果更佳）2012-03-03
利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了jquery預(yù)加載圖片的方法,涉及jQuery操作圖片的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JQuery右鍵菜單插件ContextMenu使用指南,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了利用jQuery異步上傳文件的插件用法詳解,需要的朋友可以參考下2017-07-07
JQuery中關(guān)于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的，而query-1.4.2.js是易于開(kāi)發(fā)著閱讀的，具體詳解祥看本文，希望對(duì)你有所幫助2013-05-05
jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
在介紹如何擴(kuò)展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。2010-05-05