jquery 操作兩個select實現(xiàn)值之間的互相傳遞
更新時間:2014年03月07日 09:04:07 作者:
本篇文章主要是對jquery操作兩個select實現(xiàn)值之間的互相傳遞進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
復(fù)制代碼 代碼如下:
function moveToRight(select1,select2)//把選中的移動到右邊 sleect1和sleect2分別是下拉列表框的ID
{
$('#'+select1+' option:selected').each(function(){
$("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select2+"");
$(this).remove();
$('#'+select2).bind('dblclick',function(){
moveToLeft(select1,select2);
});
});
}
function moveAllToRight(select1,select2)//把所有的移動到右邊
{
$('#'+select1+' option').each(function(){
$("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select2+"");
$(this).remove();
});
}
function moveToLeft(select1,select2)//把選中的移動到左邊
{
$('#'+select2+' option:selected').each(function(){
$("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select1+"");
$(this).remove();
});
}
function moveAllToLeft(select1,select2)//把所有的移動到左邊
{
$('#'+select2+' option').each(function(){
$("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>").appendTo("#"+select1+"");
$(this).remove();
});
}
如果要雙擊select中的某一個option就把當前值傳到另一個select需要bind一個select 事件 如下即可
復(fù)制代碼 代碼如下:
$('#sel2').bind('dblclick',function(){//給下拉框綁定雙擊事件
moveToRight('sel2','sel3');
});
$('#sel3').bind('dblclick',function(){
moveToLeft('sel2','sel3');
});
您可能感興趣的文章:
- 基于JQuery實現(xiàn)的Select級聯(lián)
- jquery取消選擇select下拉框示例代碼
- jquery實現(xiàn)省市select下拉框的替換(示例代碼)
- jQuery取得設(shè)置清空select選擇的文本與值
- jquery制作select列表雙向選擇示例代碼
- jquery 實現(xiàn)兩Select 標簽項互調(diào)示例代碼
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- jQuery中:selected選擇器用法實例
- jquery操作select方法匯總
- Jquery對select的增、刪、改、查操作
- jquery實現(xiàn)動態(tài)操作select選中
- JQuery select(下拉框)操作方法匯總
- jquery使用ul模擬select實現(xiàn)表單美化的方法
- jQuery實現(xiàn)的仿select功能代碼
- 基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
相關(guān)文章
通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
相信大家喜歡這個界面無非也是喜歡它的動態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網(wǎng)頁上模仿這種效果,就貼出來給大家噴一下。雖然是一些很低級的技術(shù),但是也希望有需要的朋友可以參考下2013-07-07jquery UI Datepicker時間控件的使用方法(基礎(chǔ)版)
這篇文章主要介紹了jquery ui datepicker時間控件的使用方法,需要的朋友可以參考下2015-11-11淺談jquery選擇器 :first與:first-child的區(qū)別
下面小編就為大家?guī)硪黄獪\談jquery選擇器 :first與:first-child的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jquery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了jquery實現(xiàn)Ctrl+Enter提交表單的方法,涉及jquery針對鍵盤按鍵的響應(yīng)與表單操作相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-07-07Tab頁界面,用jQuery及Ajax技術(shù)實現(xiàn)
從桌面開發(fā)的時代開始,Tab頁就是一個優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點。2009-09-09jQuery實現(xiàn)打開頁面漸現(xiàn)效果示例
這篇文章主要介紹了jQuery實現(xiàn)打開頁面漸現(xiàn)效果的方法,結(jié)合實例形式分析了jQuery樣式操作及頁面元素的漸變效果實現(xiàn)技巧,需要的朋友可以參考下2016-07-07jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習(xí)方法:先入門,后進階!2009-12-12