jquery添加和删除列表框中的项目

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

我想要做的是防止用户添加一些已经添加。选项的价值都将是Guids。奖励分数，如果你可以修改小提琴使用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使其看起来很漂亮整洁。

重大更新一个巨大的感谢大家谁也对这个问题作出了贡献，我已经采纳了大家的意见和小提琴，并生成该>>fiddle< <

来源

2013-03-21 Callum Linington

你能不能简单地从阵列点击添加时删除所选项目。点击“返回”时，只需再次添加。 – DaveHogan 2013-03-21 13:42:00

但你添加到什么类别？你永远不会知道，除非你使用一个复杂的对象的价值，而不是仅仅一个GUID – 2013-03-21 13:45:18

@DaveHogan请看到我的最新小提琴的问题，采纳你说，大约从一个数组中移除，并把它回来，其实我去什么更进一步，只是说是否显示它:) – 2013-03-22 12:01:47

我想你的例子会想要做这样的事情：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(); 
});

来源

2013-03-21 13:43:50 OptimizedQuery

这完美的作品，这样一个优雅的解决方案 – 2013-03-21 13:49:55

请看看我编辑的问题:)我已经做出了新的小提琴 – 2013-03-22 12:00:01

好的解决您的添加功能只需添加以下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-21 13:43:18

删除工程，但添加一个相同的项目没有为我工作。 – 2013-03-21 13:47:13

对不起，我更新了我的jsfiddle代码和我的发布代码 – 2013-03-21 13:51:48

它应该是.text（）不.val（） – 2013-03-21 13:53:25

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

来源

2013-03-21 13:43:40 PSR

@ No1_Melman检查这个一旦 – PSR 2013-03-21 13:44:15

请看看我的新小提琴的问题，它有一个非常良好的工作解决方案，你可能会感兴趣:) – 2013-03-22 12:03:40

试试这个，如果你想防止用户添加一个选项，已存在

$("#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-21 13:48:20 DVM

获取现有的选项列表，检查那些你已经加入存在如果没有，添加它们：

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-21 13:49:41

尝试：

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

来源

2013-03-21 13:50:17 darshanags

请参阅我用最新的小提琴:)更新问题 – 2013-03-22 12:02:26

看一看这个解决方案： - 使用在数据赞扬跟踪项目父列表选择器并避免使用此选择器和数据属性的循环。

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-21 15:15:31 PSL

那很酷，现在需要的只是以实现所选择的项目从列表框中2转移到选定的项目列表框，然后再回到 – 2013-03-21 15:18:36

是的，这将是自easliy可能你有你选择的数据键项目列表中，您可以在添加更改事件之前删除它们。在添加时删除克隆。 – PSL 2013-03-21 15:40:56

它有点混乱给我，所以如果你证明这将是极好的 – 2013-03-21 16:26:41

如果要动态地添加和删除行无缝地尝试这种方式

http://jsfiddle.net/WX4Nw/

添加指向selecteditems列表作为数据ATTRIB到根项关键将帮助您控制，以便您可以轻松管理添加/删除。从小提琴

段： -

$('#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-21 22:27:13 PSL

如何进行删除工作？我感到非常困惑，顺便说一句很棒。真正的酷东西，展示了js的一些真正的力量！+ – 2013-03-22 09:27:27

请看我在问题中的更新，我想你会喜欢它:) – 2013-03-22 11:59:12

很干净，简单（的伟大工程，只有几行）：

 $("#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-20 07:08:13 gunslingor

jquery添加和删除列表框中的项目

回答

相关问题