How to display data in select box option using jquery

Question

I want to display data in select box option from ajax response.

here is my view file

<select class="form-control" name="vendor" id="vendor_list" required style="width: 159px;">
<option value="">Vendor 1</option>
</select>

Here is my ajax success function

success: function(data) {
    $.each(data, function(i, value) {
        console.log(value);
        $('#vendor_list').append('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');
        console.log(value);
    });
}

here is my ajax response json data

[{"vendor_name":"scscss"},{"vendor_name":"xzcdsfdx"}]

How to display value in select box. giv me suggestion.thanks

What is the error that you are getting? This code looks fine. If there are multiple responses as shown in your ajax response code, adding the options using a loop. — Aditya
– Aditya, Commented May 30, 2016 at 9:11
I am getting following error--morris.js (line 79, col 15) TypeError: invalid 'in' operand e — Lokendra Singh Panwar
– Lokendra Singh Panwar, Commented May 30, 2016 at 9:12
well it's coming from morris.js we don't even know what that is. I don't think we can help you with the shared code. — T J
– T J, Commented May 30, 2016 at 9:17

brk · Accepted Answer · 2016-05-30 10:11:42Z

4

I think the problem is with

$('#vendor_list').append('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');

It will be much better if you create a option string & append it after entire data has been iterated

Since it is not possible to replicate the ajax , so I have directly use the ajax response

You can put the entire code inside success block , but you will not need var x because data will play role of var x=[...] in your case

var x = [{"vendor_name":"scscss"},{"vendor_name":"xzcdsfdx"}]
var _options =""
$.each(x, function(i, value) {
        _options +=('<option value="'+ value.id+'">'+ value.vendor_name +'</option>');
    });
$('#vendor_list').append(_options);

Check this jsFiddle

answered May 30, 2016 at 10:11

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

How to display data in select box option using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related