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

就这样

$('#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 3

如果我正确理解您正在尝试实现的目标，那么选项标签上的值必须与此匹配。

e.g。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用此代码

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

多选onchange事件jquery

4 个答案: