我在向所选插件添加新选项值时遇到问题。
所有代码都在这里。
我做了什么?
- 我创建了一个数组来添加所有选择的选项和最近选择的一个
- 我将新数组添加到选定的输入中并更新它以动态获取结果
问题是什么?
- 我在所选插件中有重复值
- 我没有得到想要的结果,每次我点击新值时只显示一个值,而不是添加到之前选择的选项中!
想要得到什么结果?
- 当我点击第一个多选(.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>
最佳答案
更新 1(修复问题 1),仅通过添加 if 语句将选项添加到 .chosen-select
元素:
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);
});
关于javascript - 将多个值添加到多个选择 jquery 插件(选择),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45267766/