<div class="row">
    <div class="col-xs-12">
        <div class="form-group">
            <?php 
            echo $form->label('country', t('Country'));
            echo $form->selectCountry('country', $country->getCountry());
            ?>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="form-group">
            <?php 
            echo $form->label('state', t('State'));
            echo $form->select('state', null);
            ?>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('#country').change(function(){
            $.ajax({
                url: '<?php echo $this->action('get_states'); ?>',
                type: 'GET',
                data: { country: $(this).val() },
                success: function(data){
                    var states = $.parseJSON(data);
                    var state = $('#state');
                    if(states == null){
                        state.hide();
                    }
                    else{
                        state.show()
                            .find('option')
                            .remove();
 
                        $.each(states, function(key, value){
                            var option = $('<option></option>')
                                .text(value)
                                .val(key);
                            state.append(option);
                        });
                        $('#state').val('<?php echo $country->getState(); ?>');
                    }
                }
            });
        }).trigger('change');
 
    });
</script>