CODEWITHSUNDEEP
javascriptjqueryjson
ReynierPM
ReynierPM

Reputation: 18660

Build select options based on JSON result

I have this JSON:

{
   "message":"",
   "entities":[
      {
         "city":"1",
         "state":"VE.01",
         "country":"VE",
         "name":"Maroa"
      },
      {
         "city":"2",
         "state":"VE.01",
         "country":"VE",
         "name":"Puerto Ayacucho"
      },
      {
         "city":"3",
         "state":"VE.01",
         "country":"VE",
         "name":"San Fernando de Atabapo"
      }
   ]
}

I need to build a select options based on city and name results. I have the empty HTML select:

<select name="city" id="city">
    <option value="-1">Select a city</option>
</select>

And, maybe I'm wrong, but I can move from the result (stored in data.entities javascript var) as follow:

$each.(data.entities, function(){
  // here I should build the options
})

But I don't know where to go from there, can any give me some push or advice?

This is how the select#city should be:

<select name="city" id="city">
    <option value="-1">Select a city</option>
    <option value="1">Maroa</option>
    <option value="2">Puerto Ayacucho</option>
    <option value="3">San Fernando de Atabajo</option>
</select>

Clean SELECT before append new values

All the answers works as I want but see my code:

$(".state").change(function() {
    state = $('.state option:selected').val();
    $.get(Routing.generate('cities') + '/VE/' + state).success(function(data) {
        if (data.message) {
            message = data.message;
        } else {
            $.each(data.entities, function(i, d) {
                $('#city').append('<option value="' + d.city + '">' + d.name + '</option>');
            });
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No hay conexión con el servidor";
        }
    });
});

I need to clean the SELECT but leaving the default option <option value="-1">Select one</option> before append the new values, how I do that?

Upvotes: 0

Views: 129

Answers (4)

Umesh Sehta
Umesh Sehta

Reputation: 10683

try:

$('#city').empty().append('<option value="-1">Select a city</option>');
$.each(data.entities, function(i,d){  
 $('#city').append('<option value="'+d.city+'">'+d.name+'</option>');  
});

Demo

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

try this

$.each(data.entities, function (key, val) {

    $("#city").append($("<option>", {value: val.city,text: val.name }));

});

DEMO

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25882

If I understood your problem correctly, I think this should work for you

options = ''
$.each(data.entities,function(index,value){
    options += '<option value='+value.city+'>'+value.name+'</option>';
});
$('select').append(options)

Upvotes: 1

Nikhil Talreja
Nikhil Talreja

Reputation: 2774

Try this: http://jsfiddle.net/K6Lf4/

$.each(data.entities, function(index,option){
  $("#city").append('<option value="'+option.city+'">'+option.name+'</option>');
});

Upvotes: 1

Related Questions