CODEWITHSUNDEEP
javascriptjquery
Edgar
Edgar

Reputation: 187

Populate items into SELECT with Jquery

I'm having trouble populating a SELECT with jquery, when the user writes the zipcode or part of it, it searches the database and returns this:

{"success":1,"id":"50","street":"Central One"},{"success":1,"id":"60","street":"Central Two"}

One success for each street it finds. For a single street and using a text input I'm using this

UPDATE 1 - FULL CODE

$(document).ready( function() {
 $('#zip').blur(function(){
       $.ajax({
            url : '../../controller/zip.php', 
            type : 'POST', 
            data: 'zip=' + $('#zip').val(), 
            dataType: 'json', 
            success: function(data){
                if(data.sucesso == 1){
                    $('#id').val(data.id);
                    $('#street').val(data.street);
                }
            }
       });   
return false;    
})
});

How can I change this so I can populate a select box.

Thanks

Upvotes: 1

Views: 96

Answers (5)

Rob M.
Rob M.

Reputation: 36511

Assuming you already have the select element on the page and the data that is coming back from the server is an array of objects, this should work:

$.ajax({
    url : '../../controller/zip.php', 
    type : 'POST', 
    data: 'zip=' + $('#zip').val(), 
    dataType: 'json',
    success: function(data) {
        var $items  = [];
        $.each(data, function(street) {
            if(data.success === 1) {
                $items.push($('<option />').attr({
                    value: street.id
                }).text(street.street));
            }
        });
        $('#your-select-element').append($items);
    }
});

Notice this isn't setting the value for one option, it is creating <option> tags for each of the response's streets and appending them to a <select> element.

Upvotes: 0

Thomas Junk
Thomas Junk

Reputation: 5676

I would not encourage to do so; you're better off using a html-templating engine like mustache or handlebars.

Doing this kind of stuff in plain JS (string concatenation) is gross. It pollutes your sourcecode.

Anyways, this would do the trick to generate the necessary HTML:

function generateHTML(data){
    return data.reduce(function(o,n){
        return o+"<option value='"+n.id+"'>"+n.street+"</option>";
    },"");
}

Here is the Fiddle to play with. If you need to filter for success, you could add a filter() 

function generateHTML(data){
    return data.filter(function(x){
        return !!x.success;
    }).reduce(function(o,n){
        return o+"<option value='"+n.id+"'>"+n.street+"</option>";
    },"");
}

You could easily use $("#selectBoxId").html(generateHTML(data)) to insert it to the DOM.

To fit it into your codebase, you should add it in the success handler:

success: function(data){
    function generateHTML(data){
        return data.reduce(function(o,n){
            return o+"<option value='"+n.id+"'>"+n.street+"</option>";
        },"");
    }
    $("select").html(generateHTML(data))
}

For the inner workings of Array.prototype.reduce() take a look at MDN and for Array.prototype.filter()

Upvotes: 0

Anujith
Anujith

Reputation: 9370

Use this for adding items to select box dynamically:

var $selectBox = $('#selectboxId');
$selectBox.empty();
$.each(data, function (idx, val) {
    if (val.success) {
        $selectBox.append($('<option>', {
            value: val.id,
            text:  val.street
        }));
    }
});

Upvotes: 1

alex.eby
alex.eby

Reputation: 21

What is being passed back for a single address is a single object from which you can grab the information. When there are multiple responses you need to go through each of them and handle them.

When we look at MDN's article it shows that we need a parent <select> tag and then we need to populate the children. The process would look like this:

  • Find / create parent select
  • [Optional] Remove previous child <option> tags
  • Loop through responses
    • Create a new <option> element
    • Populate the <option> with the appropriate value and content
    • Append it to the parent <select>

Some things to be aware of, if you're clearing the previous addresses each time you get a response from the database you'll want to remove these previous <option>s. This can be done either by .empty() if there are no other children in the parent or starting with the parent <select> and removing all child <options>.

Upvotes: 1

EyasSH
EyasSH

Reputation: 3769

If the JSON being returned is a list [{...}, ..., {...}], then you can use Array.forEach. Here is the success callback:

function(data) {
    data.forEach(function(item) {
        if (item.success) {
            // use item.id and item.street
        }
    });
}

If you have a <select> element, then you will want to be populating it with <options>, by appending an <option> element under each successful "if" branch in the forEach.

Upvotes: 0

Related Questions