javascript - リストボックスからのアイテムの追加と削除のJquery

Question

私はこのフィドルを作成しました。これにより、ユーザーはアートまたはビデオのいずれかをクリックして、2番目のリストボックスにそれらの選択に関連付けられたリストを動的に入力できます。2つのボタンがあります。1つはボックスに選択を追加するためのもので、もう1つは選択を削除するためのものです。

私がやりたいのは、ユーザーがすでに追加されているものを追加できないようにすることです。オプションの値はすべてGuidになります。intsの代わりにGuidを使用するようにフィドルを変更できる場合は、ボーナスポイント。

私はこれを試しました：

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

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

選択したアイテムをリストから削除できるようにしたいのですが。

ありがとう、

更新私が思いついた解決策を皆さんに知らせるだけで、本当にスマートな方法でGUIDを追加したので、ボーナスポイントを獲得しました:)フィドル、HTMLを整理して見栄えを良くしました。

メジャーアップデートこの質問に貢献してくれたすべての人に大いに感謝します。私はすべての人のコメントとフィドルを取り入れ、これを生成しました>> フィドル <<

score 12 · Accepted Answer

次のようなことをしたいと思います。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();
});

score 2 · Accepted Answer

試す：

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

ここでフィドル

score 2 · Accepted Answer

行を動的にシームレスに追加および削除する場合は、この方法を試してください

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

score 1 · Accepted Answer

このソリューションを見てください。-データ属性を使用してアイテムの親リストセレクターを追跡し、このセレクターとデータ属性を使用してループを回避します。

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

score 1 · Accepted Answer

追加機能を修正するには、次のif条件を追加するだけです。

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

アイテムを削除するには::

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

これは私がそれを更新した後の例ですjsfiddle

score 0 · Accepted Answer

リンクを見る

if条件を次のように記述します

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

それから加えて

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

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

score 0 · Accepted Answer

ユーザーが既存のオプションを追加できないようにする場合は、これを試してください

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

削除するためにフィドルも更新しました。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

本当にクリーンでシンプル（うまく機能し、数行だけ）：

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

javascript - リストボックスからのアイテムの追加と削除のJquery

9 に答える 9

Related

Reference