अजाक्स द्वारा HTML से PHP फ़ाइल में डेटा कैसे पास करें?

मैं जानना चाहता हूं, मैं एजेक्स द्वारा एचटीएमएल से PHP फ़ाइल में <select> तत्व कैसे पास कर सकता हूं।

ये रहा मेरा index.php:

<p>
<form action = "display.php" method="post" enctype="multipart/form-data">

Select: 

<select name="chosenOption" id="chosenOption"  style="width:100px"">
    <?php
    include 'dbConnection.php';
    $query = $db->query("SELECT id,name FROM products");
    while($row = $query->fetch_assoc())
    {
    echo'
    <option value="'.$row['id'].'">'.$row['name'].'
    </option>';
    }
    ?>
    </select>

Display : <input type="submit" name="display" value="Display">

</form>
</p>

मेरा display.php, जहां मेरे पास अजाक्स विधि है:

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
function refresh_div() {
        var chosenOption= $('#chosenOption').val();
        jQuery.ajax({
        url: 'products.php',
        type:'POST',
        data:{chosenOption:chosenOption},
        success:function(results) {
        jQuery(".result").html(results);
        }
    });
}
t = setInterval(refresh_div,1000);
</script>


<div class="result"></div>

और products.php, जहां मैं चयनित < select > तत्व पास करना चाहता हूं:

<?php
include 'dbConnection.php';
$chosenOption = $_POST["chosenOption"];

// Display section

$query = $db->query("SELECT cost,description FROM products_info WHERE products_id=$chosenOption);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
echo "Actual cost and description: ".$row["cost"]. " ".$row["description"]. ; 
 }
 } else {
    echo "No data";
  }

?>

मुझे उम्मीद है कि index.php से चयनित विकल्प को AJAX द्वारा products.php को पास किया जाएगा और उचित संदेश प्रदर्शित किया जाएगा। वर्तमान कोड काम नहीं करता है। कोई विचार?