溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jQuery如何實現左右兩個列表框的內容相互移動功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
在jQuery中將左右兩個列表框的內容相互移動，移動的同時進行刪除，這里只是給大家寫一個入門的小案例，今后寫相同的功能思路也是一樣的。僅供新手們的一個參考。希望能給那些跟我一樣在菜鳥路上不斷奮斗的人一些靈感，盡早入門。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表數據移動</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//將左邊數據移動到右邊
$("#right").click(function(){
//將左邊option中選中的值賦給vSelect變量
var vSelect=$("#leftSelect option:selected");
//將數據添加到rightSelect中
vSelect.clone().appendTo("#rightSelect");
//同時刪除leftSelect中的數據
vSelect.remove();
});
//將右邊數據移動到左邊
$("#left").click(function(){
var vSelect=$("#rightSelect option:selected");
//將右邊的數據追加到左邊列表中
vSelect.clone().appendTo("#leftSelect");
vSelect.remove();
});
//將左邊全部數據移到右邊
$("#rightAll").click(function(){
$("#rightSelect").append($("#leftSelect>option"));
$("#leftSelect>option").remove();
});
//將右邊數據全部移到左邊
$("#leftAll").click(function(){
$("#leftSelect").append($("#rightSelect>option"));
$("#rightSelect>option").remove();
});
});
</script>
</head>
<body>
<div>
<select id="leftSelect" multiple="multiple" >
<option value="0">電影0</option>
<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>
</select>
<input type="button" id="right" value=">" />
<input type="button" id="rightAll" value=">>>" />
<input type="button" id="left" value="<" />
<input type="button" id="leftAll" value="<<<" />
<select id="rightSelect" multiple="multiple" >
<option value="6">電影6</option>
<option value="7">電影7</option>
<option value="8">電影8</option>
<option value="9">電影9</option>
</select>
</div>
</body>
</html>這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可看到如下運行效果：
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現左右兩個列表框的內容相互移動功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
