Jquery aggiunta e rimozione di elementi dalla listbox

Question

Ho creato questo fiddle, consente all'utente di fare clic su una grafica o video, popolando dinamicamente la seconda casella di riepilogo con l'elenco associato a tali selezioni. Ci sono due pulsanti, uno per aggiungere la selezione alla scatola, l'altro che rimuove la selezione.

Quello che mi piacerebbe fare è impedire all'utente di aggiungere alcuni che sono già stati aggiunti. Il valore delle opzioni sarà tutto Guids. Punti bonus se puoi modificare il violino per usare Guid invece di int.

Ho provato questo:

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

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

vorrei consentire all'utente di rimuovere gli elementi selezionati dalla lista.

Grazie,

UPDATE Basta lasciare che voi ragazzi sa che cosa la soluzione è che mi è venuta, ho ottenuto i punti bonus, perché ho aggiunto GUID ad essa in un modo davvero intelligente :) fiddle, anche io riordinato l'html per renderlo bello e ordinato.

importante aggiornamento Una massiccia grazie a tutti coloro che hanno contribuito a questa domanda, mi hanno assunto tutti quanti bordo commenti e violini e hanno generato questo >>fiddle< <

Answer 1

ti penso vorrebbe fare qualcosa di simile: Check if value is in select list with JQuery.

Modificare il codice per qualcosa come questo dovrebbe funzionare:

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

Rimozione di elementi selezionati sarebbe simile a questa:

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

Answer 2

Ok per risolvere il tuo aggiungere la funzione è sufficiente aggiungere il seguente se la condizione ::

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

per rimuovere gli elementi ::

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

Ecco l'esempio dopo ho aggiornato lo jsfiddle

Answer 3

VEDERE LA scrittura LINK

se condizioni come

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

Quindi aggiungere

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

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

Answer 4

provare questo se si desidera impedire all'utente di aggiungere un'opzione che esiste già

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

Aggiornato il violino per rimuovere anche.

Answer 5

ottenere l'elenco di opzioni esistenti, controllare se quelli si stanno aggiungendo già esistono, se non, aggiungerli:

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

Prova:

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

Dai un'occhiata a questa soluzione: - Utilizzando i dati a tributo a tenere traccia del selettore degli elenchi genitori degli elementi e ad evitare un ciclo con l'aiuto di questo selettore e dell'attributo dei dati.

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

Se si desidera aggiungere in modo dinamico ed eliminare righe senza soluzione di continuità provare in questo modo

http://jsfiddle.net/WX4Nw/

L'aggiunta di un puntatore alla lista SelectedItems come attrib dati alla chiave elemento principale ti aiuterà a controllare in modo da poter facilmente gestire aggiungere/rimuovere.

Snippet dal violino: -

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

davvero pulito e semplice (grandi opere e solo poche righe):

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