Question

我创建了这个fiddle，它允许用户点击艺术品或视频，动态填充第二个列表框以及与这些选择相关联的列表。有两个按钮，一个用于将选项添加到框中，另一个用于删除选择。

我想做的是阻止用户添加一些已添加的内容。选项的价值都是Guids。如果您可以修改小提琴以使用Guid而不是整数，则可获得奖励。

我试过这个：

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

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

我想让用户从列表中删除所选项目。

谢谢，

更新只是让你们知道我提出的解决方案是什么，我得到了奖励积分因为我以一种非常聪明的方式添加了GUID :) fiddle，我还整理了HTML，使它看起来很整洁。

主要更新非常感谢所有为此问题做出贡献的人，我已经接受了每个人的评论和小提琴，并生成了＆gt;＆gt; {{ 3}} ＆lt;＆lt;

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

尝试：

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

如果您想以无缝方式动态添加和删除行，请尝试

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 4

好的修复你的添加功能只需添加以下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

后的示例

Answer 5

查看此解决方案： - 使用data属性跟踪项目父列表选择器，并借助此选择器和数据属性避免循环。

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 6

查看LINK

将条件写为

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

Answer 7

如果您想阻止用户添加已存在的选项

，请尝试此操作

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

获取现有的选项列表，检查您添加的选项是否已存在，如果没有，请添加它们：

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

Jquery在列表框中添加和删除项目

9 个答案: