将多个值添加到多个选择 jquery 插件（选择）答案

【问题标题】：add multiple values to multiple select jquery plugin (chosen)将多个值添加到多个选择 jquery 插件（选择）
【发布时间】：2017-07-23 17:08:56
【问题描述】：

向所选插件添加新选项值时遇到问题。

这里有所有的代码。

我做了什么？

我创建了一个数组来添加所有选择的选项和最近选择的选项
我将新数组添加到所选输入中并对其进行更新，以便动态获取结果

有什么问题？

我在所选插件中有重复值
我没有得到想要的结果，每次点击新值时只显示一个值，而不是在之前选择的选项中添加！

想要得到什么结果？

当我点击第一个多选（.second 类）时，这个会自动添加到第二个多选（选择的插件）中。
如果我在第二个多选中已存在的值中单击另一个时间，则不会再次添加此值。
每次我单击一个新选项时，我都会将其附加并在第二个多选中选中，并且将显示所有选择的选项，而不仅仅是新单击的选项。

请问有什么解决办法吗？

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

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

【问题讨论】：

标签： javascript jquery

【解决方案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-array。不是索引，而是所选选项的值。通过记录 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/

【讨论】：