8

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

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

我试过这个：

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

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

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

谢谢，

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

重大更新非常感谢所有为这个问题做出贡献的人，我已经接受了每个人的评论和小提琴，并产生了这个>> 小提琴 <<

4

9 回答 9

12

我想你会想做这样的事情：检查值是否在 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();
});
于 2013-03-21T13:43:50.347 回答
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();
    });
});

在这里提琴

于 2013-03-21T13:50:17.597 回答
2

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

http://jsfiddle.net/WX4Nw/

添加指向 selecteditems 列表的指针作为根项目键的数据属性将帮助您控制，以便您可以轻松管理添加/删除。

小提琴的片段：-

$('#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);
    });
于 2013-03-21T22:27:13.427 回答
1

看看这个解决方案：- 使用 data 属性来跟踪项目父列表选择器，并在此选择器和 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);
    });
});
于 2013-03-21T15:15:31.250 回答
1

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

于 2013-03-21T13:43:18.017 回答
0

如果您想阻止用户添加已存在的选项，请尝试此操作

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

也更新了删除的小提琴。

于 2013-03-21T13:48:20.393 回答
0

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

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);
     }
 });
于 2013-03-21T13:49:41.570 回答
0

查看链接

写 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();
});
});
于 2013-03-21T13:43:40.057 回答
0

真正干净和简单（效果很好，只有几行）：

        $("#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()
        });
于 2015-10-20T07:08:13.703 回答