jQuery實(shí)現(xiàn)下拉框左右移動(dòng)(全部移動(dòng),已選移動(dòng))
用到的方法為: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)文章
jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼
今天做項(xiàng)目的時(shí)候,想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個(gè)操作按鈕,怎么實(shí)現(xiàn)此功能呢?下面小編給大家?guī)?lái)了EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-08-08
jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對(duì)頁(yè)面元素屬性的判斷與動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
Javascript技巧之不要用for in語(yǔ)句對(duì)數(shù)組進(jìn)行遍歷
Javascript技巧-不要用for in語(yǔ)句對(duì)數(shù)組進(jìn)行遍歷的一些原因分析,需要的朋友可以參考下。2010-10-10
jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
如何實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件,下面有個(gè)不不錯(cuò)的示例使用jquery實(shí)現(xiàn)的,感興趣的朋友可以參考下2014-01-01
jQuery獲得IE版本不準(zhǔn)確webbrowser的解決方法
用$.browser.version經(jīng)常出現(xiàn)一些不準(zhǔn)確的狀況,最近碰到,做了一些總結(jié),不知道是否全面2014-02-02

