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 php. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 16, 2015 at 11:57
do console.log(JSON.stringify(data))); instead and tell what is your json. — Parth Trivedi
– Parth Trivedi, Commented Dec 16, 2015 at 11:57
What are you getting in this? localhost:8080/SMWS/Rest/parentService/parent/getSchoolDetails — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 16, 2015 at 11:58

Belal Khan · Accepted Answer · 2015-12-16 12:09:20Z

0

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>');
    }); 
   });
});

answered Dec 16, 2015 at 12:09

Belal Khan

2,1292 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sunil y Over a year ago

.sir can u please look into this and help me..how to save 2 images into the server.thanks in advance..!!

Mohammed Safeer · Accepted Answer · 2015-12-16 12:32:07Z

0

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);
        }
    });
}

answered Dec 16, 2015 at 12:32

Mohammed Safeer

21.6k8 gold badges79 silver badges81 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related