jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
更新時(shí)間：2016年05月06日 11:15:36 作者：張楊
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
說(shuō)一百句，不如我給大家貼張效果圖，效果圖請(qǐng)看下面：
<!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");
/*
也可以寫(xiě)為：
var p=$("#select1 option");
p.appendTo("#select2");
*/
});
});
$("#remove").click(function () {//同上，只不過(guò)方向相反
var $options = $("#select2 option:selected");
// var $remove = $options.remove();
$options.appendTo("#select1");
});
$("#remove_all").click(function () {//同上，只不過(guò)方向相反
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í)例，希望對(duì)大家有所幫助！
您可能感興趣的文章:
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- JQuery select（下拉框）操作方法匯總
- jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
- jquery實(shí)現(xiàn)select下拉框美化特效代碼分享
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
- 基于jquery實(shí)現(xiàn)下拉框美化特效
- jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
- jquery仿QQ登錄賬號(hào)選擇下拉框效果
- jQuery實(shí)現(xiàn)下拉框左右移動(dòng)（全部移動(dòng)，已選移動(dòng)）
- jQuery下拉框的簡(jiǎn)單應(yīng)用
相關(guān)文章
這篇文章主要介紹了jQuery前端開(kāi)發(fā)35個(gè)小技巧的相關(guān)資料，非常實(shí)用,需要的朋友可以參考下2016-05-05
本文主要給大家匯總介紹了了jQuery獲取頁(yè)面及個(gè)元素高度、寬度的方法，非常的實(shí)用，有需要的小伙伴可以參考下。下面的例子是基于jquery的參數(shù)與方法來(lái)快速獲取文檔或?yàn)g覽器可視區(qū)域的高度與寬度的代碼,希望本例子能給你帶來(lái)一些幫助。2016-01-01
jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)?lái)一篇jQuery的中 is(':visible') 解析及用法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載
本篇文章主要介紹了jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
jQuery+php實(shí)時(shí)獲取及響應(yīng)文本框輸入內(nèi)容的方法
這篇文章主要介紹了jQuery+php實(shí)時(shí)獲取及響應(yīng)文本框輸入內(nèi)容的方法,涉及jQuery響應(yīng)鍵盤(pán)事件及ajax調(diào)用php文件針對(duì)輸入內(nèi)容的處理與回調(diào)相關(guān)技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery中scrollTop()方法用法,實(shí)例分析了scrollTop()方法的功能、定義及返回或設(shè)置匹配元素的滾動(dòng)條的垂直偏移量時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
jquery json 實(shí)例代碼，需要的朋友可以參考下。2010-12-12
JQuery常用簡(jiǎn)單動(dòng)畫(huà)操作方法回顧與總結(jié)
這篇文章主要介紹了JQuery常用簡(jiǎn)單動(dòng)畫(huà)操作方法,回顧與總結(jié)了jQuery常用的各種動(dòng)畫(huà)效果操作方法及相關(guān)使用技巧,需要的朋友可以參考下2019-12-12
jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能
這篇文章主要介紹了jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能，操作簡(jiǎn)單方便，感興趣的小伙伴們可以參考一下2015-12-12
今天換了個(gè)高版本的jquery，發(fā)現(xiàn)原先運(yùn)行正常的方法報(bào)錯(cuò)了，仔細(xì)搜查后得出jquery獲取radio 的方法如下2010-03-03