多选onchange事件jQuery

Question

我正在创建一个表格。 我有两个字段，即1.默认值字段和2.预览字段。 两者都是多选字段。 用户将手动将选项添加到多选。 每当用户在默认值中选择一个选项时，都应显示与在预览字段中选择的相同的值。 当用户删除一个选项时，应取消选择相同的选项。 这就是我为此多重选择编写onchange事件的方式：

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

我在警报中得到正确的值。 但是，在预览字段中，没有任何反应。 默认值字段中可用的所有选项在预览字段中也可用。 但是，未在预览字段中选择在默认值字段中选择的选项。 这怎么了 我应该更改什么，以便默认字段中的更改也反映在预览字段中？

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

您可以使用此代码

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