How to modify the function below to fetch all the elements based on the selected category?

How to modify the function below to fetch all the elements based on the selected category? I simply want to fetch and show information without having to click on a button/ submission. Please guide how this can be achieved? I am open to suggestions.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    function getProdNames(){
        //How to alter this to fetch & display all the elements from col (product_name) based on the selected category.
            var product_name = $('#category').find(':selected').data('product_name');
            
            $('#prodNames').val(product_name);
    
        }
        
    </script>
</head>

Php:

<body>
      <form>
        <select id="category" name="category" onClick="getProdNames();>
                <option> <?php
                            // Attempt select query execution
                            $sql = "SELECT * FROM TABLE1";
                            if($result = $mysqli->query($sql)){
                                if($result->num_rows > 0){
                                        while($r = $result->fetch_array()){
                                           echo "<option    
                                                data-productName='$r[2]' 
                                                data-color='$r[3]'
                                                value='$r[1]'> $r[1] </option>";}
                                } } ?>
                </option>
        </select>
    
    //Display Product Names based on the selected category here in the form of multi select list
    
    <input name="prodNames" id="prodNames"  class="form-control"/>
        

Desired output: If user selects toy. This should trigger the onClick function to show all the productNames associated with this cateogory. Hence, the following output based on this example:

ABC
DEF