快捷導(dǎo)航

jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用

更新時(shí)間：2011年12月01日 22:38:23 作者：

jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。

今天這個(gè)demo是有關(guān)下拉框的。

 
<div class="centent"> 
<select multiple="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> 
<option value="7">選項(xiàng)7</option> 
</select> 
<div> 
<span id="add" >選中添加到右邊&gt;&gt;</span> 
<span id="add_all" >全部添加到右邊&gt;&gt;</span> 
</div> 
</div> 
<div class="centent"> 
<select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 
<option value="8">選項(xiàng)8</option> 
</select> 
</div> 

實(shí)現(xiàn)的功能是，能將左邊選中的選項(xiàng)添加到右邊，雙擊左邊某個(gè)選項(xiàng)也能添加給右邊，點(diǎn)擊全部添加到右邊的按鈕能把左邊都添加到右邊去。
jquery代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function(){ 
$('#add').click(function(){ 
var $option=$('#select1 option:selected'); 
$option.appendTo('#select2'); 
}) 
$('#add_all').click(function(){ 
var $option=$('#select1 option'); 
$option.appendTo('#select2'); 
}) 
$('#select1').dblclick(function(){ 
var $option=$('option:selected',this); 
$option.appendTo('#select2'); 
}) 
}) 
</script> 

dblclick()是鼠標(biāo)雙擊事件時(shí)觸發(fā)。
其他的方法和事件之前的例子都有介紹，就不說了。
這個(gè)demo代碼簡(jiǎn)單。而且功能確還說實(shí)用吧。

您可能感興趣的文章:

下拉框

相關(guān)文章

由點(diǎn)擊頁(yè)面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁(yè)開發(fā)的過程中經(jīng)常遇到的一個(gè)需求就是點(diǎn)擊一div內(nèi)部做某些操作，而點(diǎn)擊頁(yè)面其它地方隱藏該div。比如很多導(dǎo)航菜單，當(dāng)菜單展開的時(shí)候，就會(huì)要求點(diǎn)擊頁(yè)面其它非菜單地方，隱藏該菜單
2013-08-08
jQuery簡(jiǎn)單入門示例之用戶校驗(yàn)demo示例
這篇文章主要介紹了jQuery簡(jiǎn)單入門示例之用戶校驗(yàn)demo示例,分析了基于jQuery的簡(jiǎn)單用戶校驗(yàn)功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-07-07
如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果
我們今天就一個(gè)具體的需求進(jìn)行分析，引出如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-09-09
jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
網(wǎng)上看了很多jquery調(diào)用wcf的例子，可能是主機(jī)的原因，我用的是gd主機(jī)，所以都沒有成功，昨天自己搞了一天，終于成功了，現(xiàn)把方法和代碼和大家分享
2011-07-07
jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多選框聯(lián)動(dòng)插件,需要的朋友可以參考下
2014-05-05
Jquery截取中文字符串的實(shí)現(xiàn)代碼
Jquery截取中文字符串的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-12-12
jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
多行文字圖片滾動(dòng)效果的實(shí)現(xiàn)方法有很多，本例與大家分享的是jquery實(shí)現(xiàn)的具體步驟，很實(shí)用的
2014-10-10
jQuery實(shí)現(xiàn)form表單元素序列化為json對(duì)象的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)form表單元素序列化為json對(duì)象的方法,涉及jQuery基于serializeArray方法實(shí)現(xiàn)表單序列化的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
EasyUI中combobox默認(rèn)值注意事項(xiàng)
這篇文章主要介紹了EasyUI中combobox默認(rèn)值注意事項(xiàng),是個(gè)人在項(xiàng)目中遇到并解決的事宜，分享給大家，需要的朋友可以參考下
2015-03-03
Jquery 焦點(diǎn)圖用于圖片展示效果代碼
今天因網(wǎng)站需要寫了個(gè)圖片展示效果,其中用到了Jquery的data函數(shù)，剛學(xué)就被我用這了，昨天看時(shí)還覺得無(wú)甚用處，因?yàn)榭梢匀藶榈亟o一個(gè)節(jié)點(diǎn)加屬性嘛，不過省卻了幾句代碼而已。
2010-05-05