2

I am fetching cities data based on the onchange() event against selected country. I have to populate cities data based on country selected.

class ajax extends CI_Controller {
    public function getcities(){
        if($this->input->post('countryId')){
            $countryId= $this->input->post('countryId');
        }
        foreach ($this->user_model->getselectedcity($this->input->post('countryId')) as $key => $value) {
             $cities[] = $value->city; 
        }
        echo json_encode($cities);
    }
 }

In my view I have this script:

<script type="text/javascript">
    $(document).ready(function (){
        $('#changecountry').change(function(){
            //alert($(this).val());
            $.ajax({
                method: "POST",
                url: "<?php echo base_url()?>index.php/ajax/getcities",
                data:{countryId:$(this).val()}, 
                success: function(data){
                    console.log(data);
                }
            });
        });
    });
</script>

These are my dropdowns:

<?php 
if($value['type']=='countryname'){
    if(isset($value['countryname'])){
        echo '<div class="form-group">';
        echo form_dropdown('countryname', $value['options'],'','class="form-control" id="changecountry"');
        echo '</div>'; 
    }
} 
if($value['type']=='cityname'){
    if(isset($value['cityname'])){
        echo '<div class="form-group">';
        echo form_dropdown('cityname',$value['options'],'','class="form-control"');
        echo '</div>';
    }
} 

In the success function I'm getting json data, I'm not sure how to pass this to the dropdown:

["Dubai","Sharjah","Abu Dhabi","Ajman","Ras al-Khaimah","Umm al-Quwain"]

2 Answers 2

1

You need to append Ajax response with your City dropdown by using ID attribute like:

<script type="text/javascript">
    $(document).ready(function (){
        $('#changecountry').change(function(){
            $.ajax({
                method: "POST",
                url: "<?php echo base_url()?>index.php/ajax/getcities",
                data:{countryId:$(this).val()}, 
                success: function(response){
                    $.each(response, function (index, value) {
                        $("#selectID").append("<option value='"+value+"'>" + value + "</option>");
                    });
                }
            });
        });
    });
</script>

Your Drop Down (add ID attribute here):

<?php
if($value['type']=='cityname'){
    if(isset($value['cityname'])){
        echo '<div class="form-group">';
        echo form_dropdown('cityname',$value['options'],'','class="form-control" id="selectID"');
        echo '</div>';
    }
} 
?>
Sign up to request clarification or add additional context in comments.

Comments

0

In Controller

foreach ($this->user_model->getselectedcity($this->input->post('countryId')) as $option) {
     $cities[] = '<option value="'.$option["city"].'">'.$option["city"].'</option>';
}

In AJAX

success: function(html)
{
    $("#state").html(html);
}

In HTML

<select class="form-control" id="state" name="state">
    <option selected="selected">--Select State--</option>
</select>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.