多选onchange事件jQuery

Question

我正在创建一个表单。我有两个字段：

1. 默认值字段和
2. 预览字段。

两者都是multiselect元素。用户将手动将选项添加到multiselect。每当用户选择默认值中的选项时，预览字段中应显示相同的值。当用户删除一个选项时，应取消选择同一选项。

这就是我为这个多选编写

onchange

事件的方式：

$("#MultiSelect_DefaultValues").change(function() {
    alert($(this).val());
    $("#MultiSelect_Preview").val($(this).val());
});

我在警报中得到了正确的值。但是，在

preview

场中，却没有任何反应。默认值字段中可用的所有选项也可在

preview

字段中使用。但是，在默认值字段中选择的选项并未在

preview

字段中选择。

这有什么问题吗？我应该更改什么，以便默认字段中的更改也反映在

preview

字段中？

Answer 1

你说你正在使用 select2 所以像这样执行：

$("#MultiSelect_DefaultValues").change(function () {
   alert($(this).val());
   var prevSelect = $("#MultiSelect_Preview").select2();
   prevSelect.val($(this).val()).trigger('change');
});

Answer 2

如果我正确理解您想要实现的目标，选项标签上的值需要与之匹配。

例如

$("#MultiSelect_DefaultValues").change(function() {
    console.log($(this).val());
    $("#MultiSelect_Preview").val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

Answer 3

您可以通过将 int 数组发送到 select 方法来提供多个替换。

$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="cars" id="cars" multiple>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Opel</option>
    <option value="4">Audi</option>
  </select>

Answer 4

您可以使用此代码

<script>
$("#MultiSelect_DefaultValues").change(function () {
    $('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>