get data from combo box using jquery and ajax - php

Question

i'm just learning about jquery and ajax, trying to create combo box and get the data based on the combo box value
here is my code on index.php
<form action="cari.php" method="post">
<select name="kamar">
<option value="regular single">Regular Single Rp 99.000</option>
<option value="regular double">Regular Double Rp 120.000</option>
<option value="family single">Family Single Rp 127.500</option>
<option value="family double">Family Double Rp 150.000</option>
<option value="vip single">V.I.P Single Rp 170.000</option>
<option value="vip double">V.I.P Double Rp 200.000</option>
</select>
<input type="submit" value="submit" name="submit">
</form>
<br>
<div id="tampil"></div>
<script>
$(document).ready(function(){
loadData();
$('form').on('submit', function(e)
{
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success:function(){
loadData();
},
});
})
})
function loadData(){
$.get("tampil3.php", function(data){
$("#tampil").html(data)
})
}
</script>
here for cari.php
<?php
include "koneksi.php";
$jenis = $_POST['kamar'];
$sql= "select * from kamar where jkamar = '$jenis' ";
$result = mysqli_query($conn, $sql);
?>
<table cellpadding=2 cellspacing=2>
<?php
if(mysqli_num_rows($result) > 0)
{
while ($data = mysqli_fetch_array($result))
{
?>
<tr><?php echo $data['nokamar']; ?></tr>
<?php
}
}
else
{
echo "no more data!";
}
?>
</table>
tampil3.php, for getting all records from database
<?php
include "koneksi.php";
$sql= "select * from kamar";
$result = mysqli_query($conn, $sql);
?>
<table border=1 cellpadding=2 cellspacing=2>
<?php
if(mysqli_num_rows($result) > 0)
{
while ($data = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $data['nokamar']; ?></td>
</tr>
<?php
}
}
else
{
echo "no more data!";
}
?>
</table>
i already tried this code and its not working, any help?
any suggestion will be appreciated
thanks!