Step 1=> Get all the countries data in an array and all states data corresponding to country wise.
<?php
$countries_Array = array(
'IN' => 'INDIA',
'BG' => 'Belgium',
'AU' => 'Australia',
);
$states_array = array(
'IN' => array('UP' => 'Uttar Pradesh',
'DL' => 'Delhi',
'GU' => 'Gujrat'),
'BG' => array('FL' => 'Flanders',
'WL' => 'Wallonia',
'BC' => 'Brussels-Capital'),
'AU' => array('ACT' => 'Australian Capital Territory',
'TAS' => 'Tasmania',
'WA' => 'Western Australia')
);
?>
Step 2=> Create the Json of states array.
<script>
var _stateJosnData = {};
<?php if(!empty($states_array)):?>
var _stateJosnData = <?php echo json_encode($states_array); ?>;
<?php endif; ?>
</script>
Step 3=> Create countries and states Drop-down.
<select class="form-control country-select" target="#states_ddl">
<option value="">-- Select Country --</option>
<?php foreach($countries_Array as $k => $v): ?>
<option value="<?php echo $k; ?>"><?php echo $v; ?></option>
<?php endforeach; ?>
</select>
<select class="form-control" id="states_ddl">
<option value="">-- Select State --</option>
</select>
Step 4 => Jquery code for displaying states country-wise.
<script>
jQuery(document).ready(function() {
$(document).delegate('.country-select', 'change', function(e){
var source = $(this),
val = $.trim(source.val()),
target = source.attr('target');
$(target).empty();
if(typeof(_stateJosnData[val]) != "undefined"){
var stateoptions = (typeof(_stateJosnData[val]) != "undefined") ? _stateJosnData[val] : {};
$('<option>-- Select State --</option>').appendTo(target);
$.each( stateoptions , function(value, index) {
$('<option value="' + value + '">' + index + '</option>').appendTo(target);
});
}
});
});
</script>
0 Comment(s)