Multiple values set on select2 in WordPress

Question

I have been trying to show multiple selected values in select2 dropdown. So, far I have developed the dropdown and saved the selected values. I have the following code as the options for the dropdown: <option value="<?php echo esc_attr($post->ID);?>"><?php the_title();?></option> Note: The options are on loop.

Now, I can not set those multiple values to select2 on page load. Those multiple values only set if any option is selected from the dropdown again.

My code is mentioned below:

if ( isset( $wp_travel_engine_setting['crosssell']['trips'] ) && $wp_travel_engine_setting['crosssell']['trips']!='' )
{
    $selectedval = $wp_travel_engine_setting['crosssell']['trips'];
}
echo
'<script>
jQuery(document).ready(function($){
    $("#wte-cross-sell-'.$post->ID.'").select2();
    var arrayFromPHP = '.json_encode($selectedval).';
    console.log(arrayFromPHP);
    $("#wte-cross-sell-'.$post->ID.'").val(arrayFromPHP);
    $("#checkbox").click(function(){
        if($("#checkbox").is(":checked") ){
            $("#wte-cross-sell-'.$post->ID.' > option").prop("selected","selected");
            $("#wte-cross-sell-'.$post->ID.'").trigger("change");
        }else{
            $("#wte-cross-sell-'.$post->ID.' > option").removeAttr("selected");
            $("#wte-cross-sell-'.$post->ID.'").trigger("change");
        }
    });
});</script>';

//variable $selectedval will get us the array of selected value ids like this as seen on browser console: (2) ["1301", "1024"]

Can anyone please shade some light on this? How can I set the values on pageload without choosing the option again.

Thanks for your time!

Kind regards,

Answer 1

It was my silly sort of mistake. I forgot to trigger the select2 change call. So, the line $("#wte-cross-sell-'.$post->ID.'").val(arrayFromPHP) will now be

$("#wte-cross-sell-'.$post->ID.'").val(arrayFromPHP).trigger("change");

Hope it will help anyone in the future!