Jquery adding and removing items from listbox

Question

I\'ve created this fiddle, it allows the user to click on either art or video, dynamically populating the the second listbox with the list associated with those selections. Ther

Answer 1

I think you would want to do something like this: Check if value is in select list with JQuery.

Modifying your code to something like this should work:

$("#SelectBox2 option:selected").each(function () {
    var optionVal = $(this).val();
    var exists = false;
    $('#SelectedItems option').each(function(){
        if (this.value == optionVal) {
            exists = true;
        }
    });

    if(!exists) {
        inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
    }
});

Removing selected items would look like this:

$('#remove').click(function () {
    $("#SelectedItems option:selected").remove();
});

Answer 2

Ok to fix your add function just add the following if condition::

if($("#SelectedItems option:contains("+$(this).text()+")").length<=0)                
   inHTML += '<option value="' + $(this).text() + '">' + $(this).text() + '</option>';

to remove items::

$('#remove').click(function () {
    $("#SelectedItems option:selected").each(function () {
       $(this).remove();
    });
});

here is the example after i updated it jsfiddle

Answer 3

Really Clean and Simple (works great and only a few lines):

        $("#icon_move_right").click(function(){
            $("#available_groups option:selected").each(function(){ 
                available_group = $(this).val();
                $("#assigned_groups").append("<option value='" + available_group + "'>" + available_group + "</option>");
            });
            $("#available_groups option:selected").remove()
        });

        $("#icon_move_left").click(function(){
            $("#assigned_groups option:selected").each(function(){ 
                assigned_group = $(this).val();
                $("#available_groups").append("<option value='" + assigned_group + "'>" + assigned_group + "</option>");
            });
            $("#assigned_groups option:selected").remove()
        });

        $("#icon_move_right_all").click(function(){
            $("#available_groups option").each(function(){ 
                available_group = $(this).val();
                $("#assigned_groups").append("<option value='" + available_group + "'>" + available_group + "</option>");
            });
            $("#available_groups option").remove()
        });

        $("#icon_move_left_all").click(function(){
            $("#assigned_groups option").each(function(){ 
                assigned_group = $(this).val();
                $("#available_groups").append("<option value='" + assigned_group + "'>" + assigned_group + "</option>");
            });
            $("#assigned_groups option").remove()
        });

Answer 4

try this if you want to prevent the user from adding an option that already exists

  $("#SelectBox2 option:selected").each(function () {
            if(  $("#SelectedItems option[value='"+$(this).val()+"']").length <=0)
            inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';

        })

http://jsfiddle.net/j2ctG/8/

Updated the fiddle for remove also.

Answer 5

Try:

$(function () {
    var artItems = ["Art 1", "Art 2", "Art 3", "Art 4", "Art 5", "Art 6"];
    var vidItems = ["Video 1", "Video 2", "Video 3", "Video 4", "Video 5", "Video 6"];
    $('#SelectBox').change(function () {
        var str = "",
            inHTML = "",
            items;
        items = $(this).val() == 'art' ? artItems : vidItems;
        $.each(items, function (i, ob) {
            inHTML += '<option value="' + i + '">' + ob + '</option>';
        });
        $("#SelectBox2").empty().append(inHTML);
    });

    $('#SelectBox2').change(function () {
        $("#selectedValues").text($(this).val() + ';' + $("#SelectBox").val());
        $('#hidden1').val($(this).val());
    });

    $('#add').click(function () {
        inHTML = "";
        $("#SelectBox2 option:selected").each(function () {
            if ($("#SelectedItems option[value=" + $(this).val() + "]").length == 0) {
                inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
            }
        });
        $("#SelectedItems").append(inHTML);
    });

    $('#remove').click(function () {
        $('#SelectedItems option:selected').remove();
    });
});

Fiddle here

Answer 6

If you want to dynamically add and delete rows seamlessly try this way

http://jsfiddle.net/WX4Nw/

Adding a pointer to the selecteditems list as a data attrib to the root item key will help you control so that you can easily manage add/remove.

Snippet from fiddle:-

$('#SelectBox').change(function () {
        var str = "",
            inHTML = "",
            key = $('#SelectBox').val(),
            items;
        items = $(this).val() == 'art' ? artItems : vidItems;
        $.each(items, function (i, ob) {
            if($('#SelectedItems option[value="' + i + '"][data-key="' + key + '"]').length == 0)
                inHTML += '<option value="' + i + '" data-key="' + key + '">' + ob + '</option>';
        });
        $("#SelectBox2").empty().append(inHTML);
    });

 $('#add').click(function () {
        var itemsToAdd = [];
        $("#SelectBox2 option:selected").each(function () {
            var optionVal = $(this).val();
            var key = $(this).data('key');
            if ($('#SelectedItems option[value="' + optionVal + '"][data-key="' + key + '"]').length == 0)                     {
                itemsToAdd.push($(this).removeAttr('selected'));
            }
        });
        $("#SelectedItems").append(itemsToAdd);
    });