How to re-open a modal using jQuery when using onchange?

I am looking for some help if possible, I have three dynamic dropdown boxes that work on the basis of whatever value is selected on the first dropdown filters the content of second select box and then further filters are applied on the third depending on the value of the second dropdown.

I do have it fully working in a standard page but I would prefer to use this within a modal, the issue that I am having is that upon changing the selection the page closes the modal and then I have to re-click the button to re-open it, the data that I have selected is still present but if possible I'm trying to find a solution that will reopen the modal when it does the action: onchange=\"reload(this.form)\".

JS

<script type="text/javascript">
            
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='index.php?cat=' + val ;
}

function reload3(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
var val2=form.subcat.options[form.subcat.options.selectedIndex].value; 

self.location='index.php?cat=' + val + '&cat3=' + val2 ;

}

</script>

Modal

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Name</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="col-md-10"></div>

Select

echo "<label>Category 1</label>";
echo "<select id='cat' name='cat' class='form-control' onchange=\"reload(this.form)\"><option value=''>Select one</option>";

echo "<br><label>Category 2</label>";
echo "<select name='subcat' class='form-control' onchange=\"reload3(this.form)\"><option value=''>Select one</option>";