Show Checkboxes on select box using jquery in php - php

Question

I have two tables in database: city and local_area
city :
id name
1 FSD
2 LHr
Local_area :
id city_id name
1 1 Kohnoor
2 1 samnabad
3 2 joharabad
4 2 amanabad
<select>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
I have a select box that allows to me to choose the city to display. When I select a city it should show a new HTML element showing all local_area for the given city.
I Have to do this using jQuery, after selection I want to store my record in database table.

Answer 1

<select id="ddCity">
<option value="-1"></option>
<option value="1">FSD</option>
<option value="2">LHr</option>
</select>
<div id="local_area_Grid"></div>
<script>
$(function(){
$("#ddCity").change(function(){
if($(this).val() != -1){
$.ajax({
url: "Server_address",
data:{cityId = $(this).val()},
success: function(data){
var _table = $("<table></table>");
for(var i = 0; i< data.length; i++){
$("<tr></tr>").append($("<td></td>").html("<label><input type='checkbox' value='data[i]' name='local_area'/>" + data[i] + "</label>")).appendTo(_table);
}
$("#local_area_Grid").html("").append(_table);
}
});
}
});
})
</script>
You should return an array from service

Answer 2

You need to use jQuery AJAX to "ask" a server for list of areas corresponding to the city. Or, may be, it would be better for you to load full list of all areas with page. For example:
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="city" name="city">
<option value="0">- Select -</option>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
<div id="area" style="display:none">
</div>
<script language="JavaScript">
var areas = {
'1' : { '1' : 'Kohnoor' },
'2' : { '1' : 'amanabad' }
}
$(function (){
var areaSelect = $('#area');
var citySelect = $('#city').change(function (){
var value = $(this).val();
if( value && typeof areas[value] != 'undefined' ){
areaSelect.empty().show();
for( var i in areas[value] ){
areaSelect.append('<input type="checkbox" name="area[]" value="'+i+'" />'+areas[value][i]+'<br />');
}
}else{
areaSelect.empty().hide();
}
});
});
</script>