Set multiple saved values on page load

[saura...@gmail.com]

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>`
<strong>Note</strong>: 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,