从下拉列表中选择后，如何在不刷新页面的情况下提交onchange表单？

Question

当我从列表框中选择一个项目时，我的页面会不断刷新。我是Ajax的新手，并且仍然从中学习。这是我的代码，我想为此编写Ajax代码。

<form id="myform" action="home_log.php" method="post">
    <label1>Room Type:*</label1> 
    <select name="roomtype" onchange="this.form.submit();"> 
        <option value="Standard Room A">Standard Room A</option>
        <option value="Standard Room B">Standard Room B</option>
        <option value="Deluxe Room">Deluxe Room</option>
    </select>
</form><br>
<label1>Room Number:*</label1>
<div id="form_output">
<?php
    $roomtype = isset($_POST['roomtype']) ? $_POST['roomtype'] : '';
    echo "<select>";
    include_once 'includes/dbh-inc.php';
    $result = $conn->query("select RoomName from tblroom_sample where RoomType='".$roomtype."'");
    while ($row = $result->fetch_assoc()) {

          unset($roomtype);
          $RoomName = $row['RoomName']; 
          echo '<option value="'.$RoomName.'">'.$RoomName.'</option>';
    }
    echo "</select>";
?>
</div>

Ajax：

$(document).ready(function () {
        $('#myform').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url : $(this).attr('action') || window.location.pathname,
                type: "GET",
                data: $(this).serialize(),
                success: function (data) {
                    $("#form_output").html(data);
                },
                error: function (jXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });
    });