添加多個值到多個選擇jquery插件（選擇）

Question

我有問題添加新的選項值到選定的插件。

您在這裏有所有的代碼。

我做了什麼？

• 我創建了一個數組中添加所有選定的選項和一個選擇最近
• 我添加新的陣列到所選擇的輸入，以動態地獲得結果

更新問題是什麼 ？

• 我有重複的值在所選擇的插件
• 我沒有得到的結果通緝，每次我點擊新的顯示只有一個值，在之前選定的選項未添加！

想得到什麼結果？

• 當我點擊第一個多選（。第二類），這一個自動添加到所述第二多選（選擇插件）。
• 如果我點擊第二個多選中已存在的值的另一個時間，則不會再添加此一個。
• 每當我點擊一個新的選項，我得到它追加和第二次multiselect選擇，並將顯示所有選擇一個不僅新點擊一個。

有問題嗎？

$(".chosen-select").chosen(); 
 

 
$("#second").on('click', 'option', function(e) { 
 
var getid = $(this).val(); 
 
var getnom = $(this).text(); 
 
var ids = []; 
 

 
$('.chosen-select') 
 
     .append($("<option></option>") 
 
        .attr("value",getid) 
 
        .text(getnom)); 
 
        
 
ids.push(getid); 
 
$('.chosen-select option:selected').each(function(i, selected) { 
 
ids.push(i); 
 
}); \t 
 

 
$(".chosen-select").val(ids).trigger("chosen:updated"); 
 
}); 
 

 
$('button').click(function(){ 
 
     $(".chosen-select").val('').trigger("chosen:updated"); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 

 

 
<select id="second" data-placeholder="Choose a Country..." multiple style="width:350px;" tabindex="4"> 
 
      <option value=""></option> 
 
      <option value="United States">United States</option> 
 
      <option value="United Kingdom">United Kingdom</option> 
 
      <option value="Afghanistan">Afghanistan</option> 
 
      <option value="Albania">Albania</option> 
 
      <option value="Algeria">Algeria</option> 
 
      <option value="American Samoa">American Samoa</option> 
 
      <option value="Andorra">Andorra</option> 
 
      <option value="Angola">Angola</option> 
 
      <option value="Anguilla">Anguilla</option> 
 
     </select> 
 
<br /><br /> 
 
<select id="first" data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"> 
 
    
 
    
 
     </select> 
 
<br /><br /> 
 
<button class="btn">Reset</button>

Answer 1

更新1（修復問題1），只有當它已經不加入存在選項添加到.chosen-select - 元素的if語句：

if ($('.chosen-select option[value="'+getid+'"]').length === 0) { 
    $('.chosen-select') 
      .append($("<option></option>") 
         .attr("value",getid) 
         .text(getnom)); 
} 

更新2 （修復問題2），將正確的值推送到ids-陣列。不是索引，而是所選選項的值。可以通過記錄ID值來注意（例如console.log(ids)）。

$('.chosen-select option:selected').each(function(i, selected) { 
    ids.push(selected.value); // Was: ids.push(i); 
}); 

工作例如：https://jsfiddle.net/petervanderwal/oz9knatt/