Jquery function passing around select options

Question

$('#addAllButton').click(function () {
            var options = '';
            $('#fromList').find('option').each(function () {
                alert($(this).val());
                //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
            });
            $('#toList').append(options);
        });

<select id="fromList" name="drop1" class="listBox" multiple="multiple">
                    <option value="1">item 1</option>
                    <option value="2">item 2</option>
                    <option value="3">item 3</option>
                    <option value="4">item 4</option>
                    <option value="0">All</option>
</select>

<select id="toList" name="drop1" class="listBox" multiple="multiple">
                        <option value="1">item 1</option>
                        <option value="2">item 2</option>
                        <option value="3">item 3</option>
                        <option value="4">item 4</option>
                        <option value="0">All</option>
    </select>

I have a button Add All. I want this button to add every option from fromList select list to the toList. My function doesn't seem to be working, can someone point me in the right direction?

I tried to use part of your code SpYk3HH:

$('#addAllButton').click(function () {
                //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
                $('#fromList').children().appendTo($("#toList"));
            });

I couldn't get this to work. I have a button called Add All, so when they click it it will move everything from #fromList to #toList. The above doesn't seem to be working either.

Answer 1

UPDATED

Sorry it took me so long to get this up, bunch of craziness last night. Anyway on with the show.

You can find working example of this (with button click) at this fiddle

I wasn't sure exactly what you wanted, but what i set up is your code with a button added and a span to let user know to select something from first list. I'll break down the example below with comments.

// this first line is more jQuery updated alternate to $(document).ready(function() {})
$(function(){
    //  next we add a click event to the button
    $("#btnClick").button().click(function(e) {
        $("#NothingSelected").hide(); // simply ensure our warning text is closed
        var $val = $("#fromList").val();  // since this is a multival select list i want to itterate through all selected values
        //  but first 2 checks
        //  Check 1) is it null, aka, nothing is select
        if ($val == null) {
            $("#NothingSelected").show(); // displays our span of no selected text help
            setTimeout(function() { $("#NothingSelected").fadeOut("slow"); }, 3000); // sets a timer to had the no selected span after 3 seconds
        }
        else if ($.inArray("0", $val) >= 0) {   //  check 2) is "all" option selected
            // The following line would prolly be quickest and easiest way
            // $("#fromList option:not(:last-child)").appendTo($("#toList"));
            // However, this will not check for duplicates and will leave you with duplicate options with the same value
            // So below i itterate through each option in from list and compare it to options in to list
            $("#fromList option").each(function(i) {  //  itterate through each option in from list
                var $this = $(this); // this will use actual option and thus, on append will move the option
                //  change to $this = $(this).clone() if you only want to clone the option
                if ($this.val() != 0) { // check to make sure the option we are looking at is not the "all" option
                    if ($("#toList:has(option[value="+$this.val()+"])").length > 0) {  //check to see if option already exist in too list
                        // here i'll create an "additive" to the value (you can do what you like) of duplicate entries
                        $this.val($this.val() + "-2")
                        // also change text to reflect it
                        .text($this.text() + " -2")
                    };
                    $("#toList").append($this); // here we move the option or send in the clone if cloned
                }
            });
        }
        else {  //do other sutff (it's not "all" selected)
            // I dont know what else you want, so here i'm just simply going to add the current from item to to list
            for (x in $val) {
                var fromItem = $("#fromList option[value="+$val[x]+"]");
                if ($("#toList:has(option[value="+$val[x]+"])").length > 0) { 
                    fromItem.val(fromItem .val() + "-2").text(fromItem.text() + " -2")
                };
                $("#toList").append(fromItem);
            };
        };
        //  With all that done, lets finally ensure that the 0 val (aka "all") is back at bottom of to list
        $("#toList option[value=0]").appendTo($("#toList"));
    });
})​;

Answer 2

To move all options from the first list to the second:

$('#addAllButton').click(function() {
    var options = $('#fromList').find('option');
    $('#toList').append(options);
});​

JS Fiddle demo.

If, as it seems from comments/answers elsewhere, you want to move all except the last of the option elements, then:

$('#addAllButton').click(function() {
    var options = $('#fromList').find('option').slice(0,$('#fromList').find('option').length -1);
    $('#toList').append(options);
});​

JS Fiddle demo.

References:

• append().
• find().
• slice().

Answer 3

Hey dude try to use this maybe it help.

$('#toList').append($('#fromList').html());

It will append the select option fromList to toList

Gudluck Bro!!