複数select onchangeイベントjquery

Question

私はフォームを作成しています。私は二つのフィールド、1.デフォルト値フィールドと2.プレビューフィールドを持っています。どちらも複数選択フィールドです。ユーザーは、マルチセレクションにオプションを手動で追加します。ユーザーがデフォルト値でオプションを選択するたびに、プレビューフィールドで選択した値と同じ値が表示されます。ユーザーが1つのオプションを削除すると、同じオプションを選択解除する必要があります。

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

私は、警告に正しい値を取得する：これは私がこの複数選択のためのonchangeイベントを書いた方法です。しかし、プレビューフィールドには反応がありません。デフォルト値フィールドで使用できるすべてのオプションは、プレビューフィールドでも使用できます。ただし、デフォルト値フィールドで選択したオプションは、プレビューフィールドで選択されていません。これには何が問題なのですか？変更する必要があるので、デフォルトフィールドの変更もプレビューフィールドに反映されますか？

Answer 1

を使用することができます

$("#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 2

達成しようとしていることを正しく理解している場合は、オプションタグの値が一致する必要があります。

あなたはこのコード

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

Answer 3

あなたはSELECT2を使用していると述べたので、このように実行します。

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