基于jQuery實現(xiàn)下拉框
更新時間:2014年11月24日 14:20:23 投稿:hebedich
本文給大家分享的是一段基于jQuery實現(xiàn)的下拉框的代碼,有相同需求的小伙伴自己拿走用吧。
項目中經(jīng)常會遇到下拉框,在扁平化和響應(yīng)式布局大行其道的今天,使用jQuery來實現(xiàn)下拉框就十分的必要了,而且也會美觀很多,這里就給大家推薦一段基于jQuery的下拉框代碼。
jQuery代碼:
復(fù)制代碼 代碼如下:
$(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');
$options.appendTo("#select2");
});
$('#remove').click(function(){
var $options = $('#select2 option:selected');
$options.appendTo("#select1");
});
$('#add_all').click(function(){
var $options = $('#select1 option');
$options.appendTo("#select2");
});
$('#remove_all').click(function(){
var $options = $('#select2 option');
$options.appendTo("#select1");
});
$('#select1').dblclick(function(){
var $options = $("option:selected",this); //獲取選中的選項
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
var $options = $("option:selected",this); //獲取選中的選項
$options.appendTo('#select1');
});
});
HTML代碼:
復(fù)制代碼 代碼如下:
<div style="width: 250px">
<div class="content" style="float: left">
<select multiple id="select1" style="width: 100px;height: 160px;">
<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>
<option value="6">選項6</option>
<option value="7">選項7</option>
<option value="8">選項8</option>
</select>
<div>
<span id="add">選中添加到右邊>></span><br>
<span id="add_all">全部添加到右邊>></span>
</div>
</div>
<div style="float: right;">
<select multiple id="select2" style="width: 100px;height: 160px;">
</select>
<div>
<span id="remove"><<選中刪除到左邊</span><br>
<span id="remove_all"><<全部刪除到左邊</span>
</div>
</div>
</div>
是不是很簡單?小伙伴們需要的話直接就可以拿到項目中使用了。
您可能感興趣的文章:
- 基于jquery的網(wǎng)頁SELECT下拉框美化代碼
- jQuery獲取(選中)單選,復(fù)選框,下拉框中的值
- jquery取消選擇select下拉框示例代碼
- jQuery實現(xiàn)下拉框左右選擇的簡單實例
- JQuery下拉框應(yīng)用示例介紹
- 一個簡單的jquery的多選下拉框(自寫)
- 基于jquery實現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- jQuery+easyui中的combobox實現(xiàn)下拉框特效
- JQuery select(下拉框)操作方法匯總
- jQuery實現(xiàn)下拉框選擇圖片功能實例
- jquery實現(xiàn)select下拉框美化特效代碼分享
- jQuery下拉美化搜索表單效果代碼分享
相關(guān)文章
jQuery Easyui學(xué)習(xí)教程之實現(xiàn)datagrid在沒有數(shù)據(jù)時顯示相關(guān)提示內(nèi)容
本篇文章給大家介紹easyui datagrid 加載查詢數(shù)據(jù)時,如果沒有相關(guān)記錄,則在datagrid中顯示沒有相關(guān)記錄的提示信息,本文介紹的非常詳細,具有參考借鑒價值,感興趣的朋友一起看下吧2016-07-07jquery ready()的幾種實現(xiàn)方法小結(jié)
下面是目前本人知道的幾種jQuery的ready ()的寫法.如果還有其他的寫法,望告知2010-06-06在jquery中處理帶有命名空間的XML數(shù)據(jù)
如果你在做AJAX應(yīng)用,則你可能經(jīng)常會用到j(luò)query(或者其他框架)處理服務(wù)返回的數(shù)據(jù)。如果用Jquery處理Json格式,將是相當(dāng)方便的。2011-06-06