jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
更新時(shí)間：2016年05月06日 11:15:36 作者：張楊
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
說一百句，不如我給大家貼張效果圖，效果圖請看下面：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.centent {
float: left;
text-align: center;
margin: 10px;
}
span {
display: block;
margin: 2px 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
font-size: 12px;
color: white;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function () {
$("#add").click(function () {//單個(gè)添加
var $options = $("#select1 option:selected");
$options.appendTo("#select2");
});
$("#add_all").click(function () {//全部添加
$("#select1 option").each(function () {
$(this).appendTo("#select2");
/*
也可以寫為：
var p=$("#select1 option");
p.appendTo("#select2");
*/
});
});
$("#remove").click(function () {//同上，只不過方向相反
var $options = $("#select2 option:selected");
// var $remove = $options.remove();
$options.appendTo("#select1");
});
$("#remove_all").click(function () {//同上，只不過方向相反
var p = $("#select2 option");
p.appendTo("#select1");
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:160px">
<option value="1">選項(xiàng)1</option>
<option value="2">選項(xiàng)2</option>
<option value="3">選項(xiàng)3</option>
<option value="4">選項(xiàng)4</option>
<option value="5">選項(xiàng)5</option>
<option value="6">選項(xiàng)6</option>
</select>
<div>
<span id="add">選中添加到右邊>></span>
<span id="add_all">全部添加到右邊>;></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:100px;height:160px"></select>
<div>
<span id="remove"><<選中刪除到左邊</span>
<span id="remove_all"><<全部刪除到左邊</span>
</div>
</div>
</body>
</html>
以上內(nèi)容是小編給大家介紹的jquery 下拉框功能實(shí)例，希望對大家有所幫助！
您可能感興趣的文章:
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- JQuery select（下拉框）操作方法匯總
- jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
- jquery實(shí)現(xiàn)select下拉框美化特效代碼分享
- JQuery實(shí)現(xiàn)級聯(lián)下拉框效果實(shí)例講解
- js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
- 基于jquery實(shí)現(xiàn)下拉框美化特效
- jQuery+PHP+MySQL實(shí)現(xiàn)無限級聯(lián)下拉框效果
- jquery仿QQ登錄賬號選擇下拉框效果
- jQuery實(shí)現(xiàn)下拉框左右移動(dòng)（全部移動(dòng)，已選移動(dòng)）
- jQuery下拉框的簡單應(yīng)用
相關(guān)文章
jquery.cookie.js是一個(gè)基于jquery的插件,一個(gè)輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。接下來通過本文給大家介紹Jquery操作cookie記住用戶名，需要的朋友參考下吧2016-03-03
jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效
這篇文章主要介紹了jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效，感興趣的小伙伴們可以參考一下2015-12-12
jquery數(shù)組之存放checkbox全選值示例代碼
使用jquery數(shù)組可以存放checkbox全選值，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
本文主要對表格的簡單應(yīng)用：表格變色;表格展開關(guān)閉;表格內(nèi)容篩選進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-06-06
7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
下面給大家分享7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航讓用戶方便地找到想要的信息，而且更讓人有一種特殊的用戶體驗(yàn)，希望大家會(huì)喜歡2013-04-04
jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴Ｎ乙彩且粋€(gè)WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保??！2009-11-11
jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù)示例
這篇文章主要介紹了jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù),需要的朋友可以參考下2014-04-04
最近一年多一直在做前端的東西，由于老板在追求一些年輕動(dòng)感的效果，讓頁面元素不能僅僅是簡單的隱藏顯示，所以經(jīng)常會(huì)使用一些動(dòng)畫效果，發(fā)現(xiàn)jQuery的動(dòng)畫真心好用啊，把常用的幾個(gè)總結(jié)一下，希望不再每次使用的時(shí)候還去翻API2013-10-10
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果2012-01-01