两个select之间option的互相添加操作(jquery实现)

自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
插件源代码(listtolist.js):


代码如下:

/**
fromid:源list的id.
toid:目标list的id.
moveOrAppend参数("move"或者是"append"):
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.

isAll参数(true或者false):是否全部移动或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
    if(moveOrAppend.toLowerCase() == "move") {    //移动
        if(isAll == true) {    //全部移动
            $("#"+fromid+" option").each(function() {
                //将源list中的option添加到目标list,当目标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添加到目标list,当目标list中已有该option时不做任何操作.
                $(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
                //目标list中已经存在的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").
不同之处在于当源list中的选中option在目标list中存在时,源list中的option不会删除.

isAll参数(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()+"]))"));
        });
    }
};

打包下载

(0)

相关推荐

  • JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    Bug现场: 通过开发人员工具查看,下拉列表框是有Options的,但你点击选择的时候却什么也不显示. 重现步骤: 该问题发生在级联下拉框的情况,第一个列表改变,第二个列表的值跟着改变! 本例中使用以下方法绑定数据: 复制代码 代码如下: //绑定下拉框 //ctnSelector:下拉框ID,带#号, //jsonData:JSON数据, //txtField:文本字段名称, //valField:值字段名称, //strOptions:默认填加的项 function InitSelectOp

  • 删除select中所有option选项jquery代码

    这样写 复制代码 代码如下: <select id="search"> <option>baidu</option> <option>sogou</option> </select> 清空: 复制代码 代码如下: $("#search").find("option").remove(); 或者 $("#search").empty();

  • JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id

  • jQuery增加、删除及修改select option的方法

    本文实例讲述了jQuery增加.删除及修改select option的方法.分享给大家供大家参考,具体如下: jQuery获取Select选择的Text和Value: 1. //获取Select选择的Text var checkText=jQuery("#select_id").find("option:selected").text(); 2. //获取Select选择的option Value var checkValue=jQuery("#selec

  • 浅析jQuery对select操作小结(遍历option,操作option)

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){   if($(this).val() == 111){   

  • jquery操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <html> <head> <title></title> <!--添加jquery--> <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript

  • jquery操作select option 的代码小结

    1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

  • jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

    个人做了一些自定义的修改 复制代码 代码如下: <!--[if lt IE 9]> <script type="text/javascript"> jQuery(function($){ var el; $("select").each(function() { el = $(this); el.data("origWidth", el.css("width")); // el.data("o

随机推荐