JQuery Hinzufügen und Gegenstände aus listbox Entfernen

Question

ich diese fiddle erstellt habe, ermöglicht es der Benutzer entweder Kunst oder Video zu klicken, dynamisch die das zweite Listenfeld mit der Liste bevölkerte mit den Auswahlen verbunden. Es gibt zwei Schaltflächen, eine Schaltfläche zum Hinzufügen der Auswahl zur Box, die andere zum Entfernen der Auswahl.

Was Ich mag würde zu tun ist, den Benutzer zu verhindern, dass einige hinzufügen, die bereits hinzugefügt wurde. Der Wert der Optionen sind alle Guids. Bonuspunkte, wenn Sie die Geige ändern können, um Guid anstelle von Ints zu verwenden.

Ich habe dies versucht:

$.each($("#SelectBox2 option:selected"), function (i, ob) { 
    if (i == $(this).val()) { 

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

ich den Benutzer ermöglichen, möchte die ausgewählten Elemente aus der Liste zu entfernen. auch

Danke,

UPDATE Gerade lassen euch wissen, was die Lösung ist, dass ich kam mit, ich habe die Bonuspunkte, weil ich GUID in eine wirklich intelligente Art und Weise, um es hinzugefügt :) fiddle, I aufgeräumt die HTML, um es schön und ordentlich aussehen.

MAJOR UPDATE Ein massiver Dank an alle, die zu dieser Frage beigetragen hat, habe ich an Bord jedermanns Kommentare und Geigen genommen und habe dies Ihre >>fiddle< <

Answer 1

Ich glaube, Sie fügen SEE aktualisiert würde so etwas tun wollen: Check if value is in select list with JQuery.

Ändern Sie Ihren Code so etwas wie dies funktionieren sollte:

$("#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>'; 
    } 
}); 

Entfernen ausgewählten Elemente würde wie folgt aussehen:

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

Answer 2

Ok zu beheben erzeugt Add-Funktion fügen Sie einfach den folgenden, wenn die Bedingung ::

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

Elemente entfernen ::

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

hier ist das Beispiel, nachdem ich es jsfiddle

Answer 3

DIE LINK

schreiben, wenn die Bedingung als

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

Dann

$('#remove').click(function(){ 

    $('#SelectedItems :selected').each(function(i, selected) { 
    $(this).remove(); 
}); 
}); 

Answer 4

dies versuchen, wenn Sie den Benutzer aus Hinzufügen einer Option verhindert werden soll, existiert bereits

$("#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/

auch die Geige für entfernen aktualisiert.bestehende Liste der Optionen

Answer 5

Erhalten Sie prüfen, ob diejenigen, die Sie bereits hinzugefügt sind vorhanden, wenn nicht, fügen Sie sie:

http://jsfiddle.net/bZXs4/

$('#add').click(function() { 
    var inHTML = ""; 
    var $opts = $('#SelectedItems').find('option'); 

    $("#SelectBox2 option:selected").each(function() { 
     var allowItemToBeAdded = true; 
     var selectedVal = $(this).val(); 
     $opts.each(function(index, element){ 
      if($(this).val() === selectedVal){ 
       allowItemToBeAdded = false; 
      } 
     }); 

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

    if(inHTML !== ''){ 
     $("#SelectedItems").append(inHTML); 
    } 
}); 

Answer 6

Versuchen:

$(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 7

Werfen Sie einen Blick auf diese Lösung: - Verwenden Sie die Daten bei Tribut, um den Listenselektor der Elemente zu verfolgen und eine Schleife mit Hilfe dieses Auswahl- und Datenattributs zu vermeiden.

http://jsfiddle.net/pramodsankar007/rMpBv/

$('#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').clone(true)); 
      } 
     }); 
     $("#SelectedItems").append(itemsToAdd); 
    }); 
}); 

Answer 8

Wenn Sie dynamisch hinzufügen möchten, und löschen Zeilen nahtlos versuchen auf diese Weise

http://jsfiddle.net/WX4Nw/

einen Zeiger auf die SelectedItems Liste als Daten attrib zum Stammelement Schlüssel Hinzufügen hilft Ihnen bei der Kontrolle, so dass Sie Add/Remove einfach verwalten können.

Snippet von Geige: -

$('#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); 
    }); 

Answer 9

wirklich sauber und Simple (funktioniert super und nur wenige Zeilen):

 $("#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() 
     });