Bootstrap模态和JS onChange（），有可能吗？

I was thinking of using the bootstrap modal to select category and reorder a list of products.

From a dropdown, I have the list of categories to choose for reordering but using javascript to load the products after choosing the category, the modal window closes. Maybe I want to use the modals in a way that can't be done?

    <div class="modal-body">
       <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="get" name="mdlfrmListProduct" id="frmListProduct"> 
    <div class="tbl-cell tbl-cell-title col-md-5">
         <select name="modalCategory" class="form-control" id="modalCategory" onChange="modalProduct();"
       required />
   <option value="">Select category</option>

 <?php  echo CategoryTree(); ?>  
    </select>
      </div>
        </form>


function modalProduct()
{
    with (window.document.mdlfrmListProduct) {
        if (modalCategory.selectedIndex == 0) {
            window.location.href = 'index.php';
        } else {
            window.location.href = 'index.php?catId=' + modalCategory.options[modalCategory.selectedIndex].value;
        }
    }
}
</script>
        </div>

the modal is provided with display:none until its called up.

When the modal is called and you trigger the onchange function, you reload the page. Of course the modal is no longer called and hidden.

Since you want to hollow out the changes from the server, it would be a solution to load them from the server via AJAX and then set the values using javascript.