after so many research i have achieved this we have 3 images and 3 options when i select 1st image first option from select is being selected , The remaining thing is onchange event on select is not working how can i achieve that ? this is the code i have tried this to trigger on change event but no luck

    $('.product-medias .swiper-slide').each(function(item, index){
    
    $(this).click(function(){
        console.log('clicked')
        
        var secondIndexSelect = $(this).attr('data-media-index');
        var parsedIndex = parseInt(secondIndexSelect, 10)
        $("select#SingleOptionSelector-0 option").eq(`${parsedIndex}`).prop('selected', true).trigger('change'); // trigger "change" and "focus" i have tried both
        $('.product-single__media-s .product-single__media').removeClass('product-single__media--selected');
        $(`.product-single__media-s .product-single__media:nth-child(${parsedIndex + 1})`).addClass('product-single__media--selected');
    })
})

right now in my code when i select index 1 image the first option is selected but on change event is not working . is there any way to bind it ?