Jqueryリストボックスから項目を追加したり削除したりする

Question

これを作成したのは、アートまたはビデオのいずれかをクリックして、2番目のリストボックスを動的に選択したリストに挿入することができるfiddleです。選択肢をボックスに追加するボタンと、選択を削除するボタンの2つのボタンがあります。

私がしたいのは、ユーザーが既に追加されているものを追加しないようにすることです。オプションの価値はすべてGuidsになります。ボーナスは、あなたがintの代わりにGuidを使うようにフィディルドを修正できるかどうかを示します。

私はこれを試してみた：

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

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

私は、リストから選択した項目を削除するには、ユーザーを有効にしたいと思います。

おかげで、

UPDATEちょうどあなたたちは解決策は、私は私は本当にスマートな方法:) fiddleでそれにGUIDを追加しましたので、私はまた、ボーナスポイントを得た思い付いたことが何であるかを知らせますhtmlを整理して見栄えを良くする。

MAJOR UPDATEこの質問に貢献してきたすべての人への大規模なおかげで、私はボードのeveryonesのコメントやフィドルで撮影していると、あなたの問題を解決するために、この>>fiddle< <

Answer 1

を追加このようなことをしたいと思うでしょう：Check if value is in select list with JQuery。

このような何かにあなたのコードを変更すると動作するはずです：

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

選択した項目を削除するには、次のようになります。あなたはそのオプションを追加することからユーザーを防ぐためにしたい場合は

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

Answer 2

[OK]を生成しています条件を追加する場合は、次の条件を追加してください::

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

アイテムを削除する::

01ここ

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

私はjsfiddle

Answer 3

それを更新した後の例である条件ならば

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

としてLINK

書き込みを参照してくださいその後、私はあなたを考える

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

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

Answer 4

はこれを試しますすでに存在する

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

フィディドも削除のために更新されました。

Answer 5

ものはすでに存在し、そうでない場合は、それらを追加追加しているかどうかを確認、オプションの既存のリストを取得します。

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

試してみてください。

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

フィドルhere

Answer 7

この解決策を見てみましょう： - アイテムの親リストセレクタを追跡し、このセレクタとデータ属性の助けを借りてループを回避することをお勧めします。

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

あなたが動的に行を追加し、削除したい場合は、シームレスルート項目キーにデータATTRIBとしてselectedItemsのリストへのポインタを追加する

http://jsfiddle.net/WX4Nw/

この方法を試してみてください追加/削除を簡単に管理できるように制御するのに役立ちます。

フィドルからスニペット： -

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

本当にクリーンでシンプルな（素晴らしい作品とわずか数行）：

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