how to populate the json data in select dropdown using ajax?

Question

Actually i need to display the list of school in a dropdown using select tag so far i am getting the response through hard coded values now here is the problem not able to generate through a link i am getting the data from rest full service how to do that , any on please help

  <html>
   <head> 
<meta http-equiv="content-type" content="application/json; charset=UTF-8">
   </head>
   <body>
     <select id="sel"></select>

     <script>
 $(function() {
    var data = [
        {
        "id": "1",
        "name": "test1"},
    {
        "id": "2",
        "name": "test2"}
    ];
    $.each(data, function(i, option) {
        $('#sel').append($('<option/>').attr("value", option.id).text(option.name));
    });
})
    </script>
   </body>
</html>

Why have you added PHP tags? And you didn't tag it with [tag:PHP]. — Praveen Kumar Purushothaman, Dec 16 '15 at 11:57
do console.log(JSON.stringify(data))); instead and tell what is your json. — Parth Trivedi, Dec 16 '15 at 11:57
What are you getting in this? http://localhost:8080/SMWS/Rest/parentService/parent/getSchoolDetails — Praveen Kumar Purushothaman, Dec 16 '15 at 11:58
You are mixing select with php and ajax in your current code. — Parth Trivedi, Dec 16 '15 at 11:59
PHP runs once before the page is rendered, are you trying to "send" the data from the ajax to the php on the same page and use the sent data as`$results`? If so, that will not work — Wesley Smith, Dec 16 '15 at 12:01
yes i know i made a mistake but want know how to do that i am getting the data as json array from the url ,the data i should display it as a dropdown — martin, Dec 16 '15 at 12:06
You didn't call the function to do ajax yet. On which event , you want to populate the select box ? On load or at any click event ? Please include that in Question. — Mohammed Safeer, Dec 16 '15 at 12:19
[ { "school_id": 7, "school_name": "VIT College Of Engineering", }, { "school_id": 1, "school_name": "Skool" } ] this is that data which i'll get from that link — martin, Dec 17 '15 at 05:57

score 0 · Answer 1 · answered Dec 16 '15 at 12:09

You can use the getJSON method of jQuery

$('#brand').change(function(){
   $.getJSON(
     'your url to get json string',
     'get parameters to send if any',
     function(result){
     //result would have your json string 
     //Empty the dropdown if it is having some items
     $('#item').empty();
     //Looping through all the json items
     $.each(result.result, function(){
     //Appending the json items to the dropdown (select tag)
     //item is the id of your select tag
     $('#item').append('<option>'+this['item']+'</option>');
    }); 
   });
});

.sir can u please look into this and help me..[how to save 2 images into the server](http://stackoverflow.com/questions/35098271/how-to-upload-more-than-one-image-to-servermysql-database-using-php-and-androi).thanks in advance..!! — sunil y, Jan 30 '16 at 07:44

score 0 · Answer 2 · answered Dec 16 '15 at 12:32

Try this,

$(document).ready(function(){
      getschool(val);
});

function getschool(val) {
    $.ajax({
        type: "GET",
        url: 'http://localhost:8080/SMWS/Rest/parentService/parent/getSchoolDetails',
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        data:'school_id='+val,
        success: function(data){
            var html = '';
            $.each(data, function(index,value){         
                html+= '<option value="'+value['item_value']+'">'+value['item']+'</option>';
            }); 
           $('#country-list').html(html);
        }
    });
}

how to populate the json data in select dropdown using ajax?

2 Answers2