0

i want to retrive this json in my select box this is my controller code and 

public function getDistrictById()
        {
                $StateId=$this->input->post('StateId');
                $District=$this->Main_model->getDistrictListByStateId($StateId);
                //echo json_encode($District);
                foreach($District as $d)
                {

                     $rows[]=array("id"=>$d->DistrictId,"name"=>$d->DistrictName);
                }
                print json_encode($rows);

        }

here is my jquery/ajax code

<script>
function getDistrict()
 {
        var StateId=$('#state option:selected').val();
        $.ajax({
                           url:'<?php echo base_url()?>Home/getDistrictById',
                           type: 'POST',
                          dataType:"json",
                           data: {StateId:StateId},
                           success: function(response){
                            // $('#District').html(response); 
                            console.log(response);
                           },

                           error: function(){
                               alert("Fail");
                           }
                       });
 }
</script>

the console.log(response); give me the exact output but i am not sure how to appen this in to a select box. i have already try How do I add options to a DropDownList using jQuery? and many more plz help...

Community
  • 1
  • 1
Anil Kumar Sahu
  • 567
  • 2
  • 7
  • 27

1 Answers1

0

Just do like this in success callback

    <script>  
    function getDistrict()
                            {
                                var StateId = $('#state option:selected').val();
                                $.ajax({
                                    url: '<?php echo base_url()?>Home/getDistrictById',
                                    type: 'POST',
                                    dataType: "json",
                                    data: {StateId: StateId},
                                    success: function (response) {
                                       $("#district").empty();  // clear previous options
                                        for (i = 0; i < response.length; i++)
                                        {
                                            $("#district").append("<option value='" + response[i].id + "'>" + response[i].name + "</option>");
                                        }
                                    },
                                    error: function () {
                                        alert("Fail");
                                    }
                                });
                            }
       </script>
R.K.Saini
  • 2,678
  • 1
  • 18
  • 25
  • no its not working for me when i add this line it show error getDistrict not defined. i want to populate all the releated district in selectbox – Anil Kumar Sahu Aug 27 '16 at 11:50
  • Sorry, my mistake your response will get id and name attribute not DistrictId and DistrictName. I have update my answer check now. Post your console result if its still not work – R.K.Saini Aug 27 '16 at 11:54
  • i did the following thing but it is not populating the related district – Anil Kumar Sahu Aug 27 '16 at 11:57
  • you use select id district (lowercase). change same in my code. use #district not #District – R.K.Saini Aug 27 '16 at 11:59
  • yes i change it already but it does not populating anything. i am new to json can you tell me foreach($District as $d) { $rows[]=array("id"=>$d->DistrictId,"name"=>$d->DistrictName); } print json_encode($rows); above code give me right result. if you have any idea about that i am waiting for your response. – Anil Kumar Sahu Aug 27 '16 at 12:07
  • Are you getting a single district or an array of districts? – R.K.Saini Aug 27 '16 at 12:09
  • array of district when i print the response in to console it show me [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 0 : Object id : "4" name : "Anantapur" __proto__ : Object 1 : Object id : "5" name : "Chittoor" __proto__ : Object 2 : Object id : "6" name : "Cuddapah" __proto__ : Object 3 : Object id : "7" name : "East Godavari" __proto__ : Object 4 : Object 5 : Object 6 : Object 7 : Object 8 : Object 9 : Object 10 : Object 11 : Object 12 : Object length : 13 – Anil Kumar Sahu Aug 27 '16 at 12:14
  • check now i have change my answer – R.K.Saini Aug 27 '16 at 12:16
  • $("#district").append("") code is working for me it return response but i have to change – Anil Kumar Sahu Aug 27 '16 at 12:23
  • don't you need select box (Dropdown) with options ? – R.K.Saini Aug 27 '16 at 12:26
  • i need but it not populating anything but when i change it to div it populates do you have any idea what is wrong – Anil Kumar Sahu Aug 27 '16 at 12:28
  • anyway thank you so much for your kind help if you have any new suggesting about this plz comment. – Anil Kumar Sahu Aug 27 '16 at 12:36
  • Its strange it should work you may have some typo . Change jquery selecter like this $("select#district") instead of $("#district"); – R.K.Saini Aug 27 '16 at 12:36
  • try to console your select like this console.log($("#district")); and check what it print in console. Its should return your tag not an empty array [] – R.K.Saini Aug 27 '16 at 12:54
  • thanks it work perfectly right now i am facing an problem when i first select state delhi it shows the delhi district but after this when i select other state it append the district next to the option like first delhi option and then other state oprion how to resolve this – Anil Kumar Sahu Aug 29 '16 at 10:33
  • you need to use $("#district").empty(); in success callback before for loop start. It will remove previous options from list and append new one – R.K.Saini Aug 29 '16 at 16:15