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添加和刪除列表框中的項目

回答

相關問題