Chained Select Boxes (Country, State, City)
$('#mobile_phone_network option:selected').val()i didn't tested but it should work. It's simple and it will give you some idea
**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>
<script>
$(document).ready(function(){
$('#country').change(function(){
loadState($(this).find(':selected').val())
})
$('#state').change(function(){
loadCity($(this).find(':selected').val())
})
})
function loadCountry(){
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=country"
}).done(function( result ) {
$(result).each(function(){
$("#country").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadState(countryId){
$("#state").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=state&countryId=" + countryId
}).done(function( result ) {
$(result).each(function(){
$("#state").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadCity(stateId){
$("#city").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=city&stateId=" + stateId
}).done(function( result ) {
$(result).each(function(){
$("#city").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
// init the countries
loadCountry();
</script>
**ajax.php**
$countryId = isset($_POST['countryId']) ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId']) ? $_POST['stateId'] : 0;
$command = isset($_POST['get']) ? $_POST['get'] : "";
switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}
$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();
echo json_encode($result);
exit();