Home > Web Front-end > JS Tutorial > Mutual adding operation of options between two selects (jquery implementation)_jquery

Mutual adding operation of options between two selects (jquery implementation)_jquery

WBOY
Release: 2016-05-16 18:41:52
Original
1229 people have browsed it

I wrote a very simple jquery plug-in, which can be implemented by calling the functions in the page.
Plug-in source code (listtolist.js):

Copy code The code is as follows:

/**
fromid: the id of the source list.
toid: the id of the target list.
moveOrAppend parameter ("move" or "append"):
move -- the option selected in the source list will be deleted .The option selected in the source list is moved to the target list. If it already exists in the target list, the option will not be added.
append -- The option selected in the source list will not be deleted. The option selected in the source list is added to the target After the list, if the target list already exists, the option will not be added.

isAll parameter (true or false): whether to move or add all
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
if(moveOrAppend.toLowerCase() == "move") { / /Move
if(isAll == true) { //Move all
$("#" fromid " option").each(function() {
Target list, no operation will be performed when the option already exists in the target list.
                  $(this).appendTo($("#" toid ":not(:has(option[value=" $(this). val() "]))"));
         });                                              false) {
                                                                                                                                                                                                                                                                                                 Since No operation is performed.
$(this).appendTo($("#" toid ":not(:has(option[value=" $(this).val() "]))")); // The already existence of Option in the target list does not move, and it is still in the source list.
if ("#"#"#" option [value = "$ (this). Val () "]").length > 0) {
                                                                                         () "]").get(0)); 🎜> if(isAll == true) {
$("#" fromid " option").each(function() {
$("")
.val($(this).val())
     .text($(this).text())
    .appendTo($("#" toid ":not(:has(option[value= " $(this).val() "]))"));
              });                                   :selected").each(function() {
                                                                                             (this).text())
     .appendTo($("#" toid ":not(:has(option[value=" $(this).val() "]))"));
           });
       }
    }
};
/**
The function is basically the same as above ("move").
The difference is that when the selected option in the source list exists in the target list, the option in the source list will not be deleted.

isAll parameter (true or false): Whether to move or add all
*/
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() "]))"));
        });
    }
};

打包下载
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template