欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

兩個select之間option的互相添加操作(jquery實現(xiàn))

 更新時間:2009年11月12日 22:16:53   作者:  
兩個select,將其中一個select選中的選項添加到另一個select中,或者點擊全部添加按鈕將所有的option都添加過去.
自己寫了一個很簡單的jquery插件,在頁面中調(diào)用其中的函數(shù)就可實現(xiàn).
插件源代碼(listtolist.js):
復(fù)制代碼 代碼如下:

/**
fromid:源list的id.
toid:目標(biāo)list的id.
moveOrAppend參數(shù)("move"或者是"append"):
move -- 源list中選中的option會刪除.源list中選中的option移動到目標(biāo)list中,若目標(biāo)list中已存在則該option不添加.
append -- 源list中選中的option不會刪除.源list中選中的option添加到目標(biāo)list的后面,若目標(biāo)list中已存在則該option不添加.

isAll參數(shù)(true或者false):是否全部移動或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
    if(moveOrAppend.toLowerCase() == "move") {    //移動
        if(isAll == true) {    //全部移動
            $("#"+fromid+" option").each(function() {
                //將源list中的option添加到目標(biāo)list,當(dāng)目標(biāo)list中已有該option時不做任何操作.
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
            });
            $("#"+fromid).empty();    //清空源list
        }
        else if(isAll == false) {
            $("#"+fromid+" option:selected").each(function() {
                //將源list中的option添加到目標(biāo)list,當(dāng)目標(biāo)list中已有該option時不做任何操作.
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
                //目標(biāo)list中已經(jīng)存在的option并沒有移動,仍舊在源list中,將其清空.
                if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {
                    $("#"+fromid).get(0)
                    .removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));
                }
            });
        }
    }
    else if(moveOrAppend.toLowerCase() == "append") {
        if(isAll == true) {
            $("#"+fromid+" option").each(function() {
                $("<option></option>")
                .val($(this).val())
                .text($(this).text())
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
            });
        }
        else if(isAll == false) {
            $("#"+fromid+" option:selected").each(function() {
                $("<option></option>")
                .val($(this).val())
                .text($(this).text())
                .appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
            });
        }
    }
};
/**
功能大體同上("move").
不同之處在于當(dāng)源list中的選中option在目標(biāo)list中存在時,源list中的option不會刪除.

isAll參數(shù)(true或者false):是否全部移動或添加
*/
jQuery.list2list = function(fromid,toid,isAll) {
    if(isAll == true) {
        $("#"+fromid+" option").each(function() {
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
        });
    }
    else if(isAll == false) {
        $("#"+fromid+" option:selected").each(function() {
            $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
        });
    }
};

打包下載

相關(guān)文章

  • jQuery EasyUI API 中文文檔 - EasyLoader 加載器

    jQuery EasyUI API 中文文檔 - EasyLoader 加載器

    jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。
    2011-09-09
  • 基于JQuery的實現(xiàn)圖片輪播效果(焦點圖)

    基于JQuery的實現(xiàn)圖片輪播效果(焦點圖)

    用JQuery操作DOM確實很方便,并且JQuery提供了非常人性化的API應(yīng)付我們的各種需求,其中選擇器在此示例-JQuery實現(xiàn)圖片輪播效果上體現(xiàn)的尤為出色。大大簡化了js的代碼。
    2010-09-09
  • 教你一步步用jQyery實現(xiàn)輪播器

    教你一步步用jQyery實現(xiàn)輪播器

    相信大家應(yīng)該都會看到在各大網(wǎng)站上都有一個輪播器的效果,于是自己不禁也想做一個,查了資料,看了輪播器的原理,慢慢的試著做了做,最終效果勉勉強強,但還是想總結(jié)出來,或許對有需要的朋友們帶來一定的幫助,下面來一起看看吧。
    2016-12-12
  • Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)

    Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)

    放大鏡類的文章網(wǎng)上有很多,由于實現(xiàn)起來比較麻煩,所以自己寫了一個,下面為大家分享下具體的算法及實現(xiàn)代碼,感興趣的朋友可以參考下
    2013-10-10
  • Jquery Datatables的使用詳解

    Jquery Datatables的使用詳解

    Datatables 是一款強大的Jquery表格處理插件,樣式方面可以兼容bootstrap3/4、JqueryUi等,也有默認的樣式可以選擇。使用Datatables可以很靈活的從服務(wù)端通過ajax更新表格數(shù)據(jù),實現(xiàn)排序、分頁等功能
    2020-01-01
  • easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法

    easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法

    很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧
    2017-01-01
  • 關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法

    關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法

    下面小編就為大家?guī)硪黄P(guān)于兩個jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯的,現(xiàn)在就分享 給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • jquery分割字符串的方法

    jquery分割字符串的方法

    這篇文章主要介紹了jquery分割字符串的方法,涉及jQuery中使用split方法進行字符串分割的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06
  • 淺析jquery的作用與優(yōu)勢

    淺析jquery的作用與優(yōu)勢

    這篇文章主要是對jquery的作用與優(yōu)勢進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • 父頁面顯示遮罩層彈出半透明狀態(tài)的dialog

    父頁面顯示遮罩層彈出半透明狀態(tài)的dialog

    本文為大家介紹下父頁面顯示遮罩層,彈出半透明狀態(tài)的dialog。dialog即彈出的子頁面,需要的朋友可以參考下
    2014-03-03

最新評論