Two chained selectmenu with Jquery UI selectmenu()

Two chained selectmenu with Jquery UI selectmenu()

  • two related selectmenu "country and city"
  • without jquery ui styling works perfekt.
  • I read here about refresh, but i Could not get it
  • here is the codes:
index.php
------------
<?php
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
   echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
?>

<!doctype html>
<html lang="en">
<head>
<?php include './head.php'; ?>
</head>
<body>
<select name="country" id="country">
<?php 
$opt = "";
$query = "SELECT * FROM country ";
$result = $mysqli->query($query);
while ( $rows = $result->fetch_assoc()) {
$opt  .= "<option value='".$rows['country_id']."'>".$rows['country_name']."</option>";
}
echo $opt;
?>
</select>
<div>
<select id ='city'> 
</select>
</div>
</body>
</html>
---------------------------------------------------------------
head.php 
-------------------
<meta charset="utf-8">
<title>jQuery UI Selectmenu</title>
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
<script type="text/javascript" src='./js/jquery.js'></script>
<script type="text/javascript" src='./js/jquery-ui.min.js'></script>
<script>
$(function() {
$( "#country" ).selectmenu();
$( "#city" ).selectmenu();
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$('#country').change(function(){
var country_id = $(this).val();
$.post('process.php',{country_id:country_id},function(data){
$('#city').html(data);
});
});
})
</script>

<style>
select {
width: 200px;
}
</style>
------------------------------------------------------------------------------------
process.php
--------
<?php
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
   echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
?>

<?php
if($_POST['country_id']){
$country_id = $_POST['country_id'];
$query ="SELECT * FROM city WHERE country_id ='$country_id'";
$result = $mysqli->query($query);
$opt = "";
while($rows =$result->fetch_assoc()){
$opt .= "<option>".$rows['city_name']."</option>";
}
echo $opt;
}

 ?>
----------------------------------------------------
database: test
tables:
  • country with country_id, country_name
  • city with city_id, city_name, country_id