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