Can't create select element with returned json data from Ajax call

Question

I'm making an ajax call to retrieve some JSON objects. I get them right. but the problem is when I want to create a select element from returned JSON, it doesn't create one or seemed to be.

My JavaScript so far:

jQuery("#make").change(function () {
    var value = $(this).val();
    jQuery.getJSON("<?php echo site_url('ajax/get/models'); ?>", {
        makeId: value
    },

    function (data) {
        if (data != "false") {
            var modelsSelect = jQuery.createElement('select');
            var modelsOptions = "";
            var id;
            var model
            jQuery.each(data, function () {
                jQuery.each(this, function (key, value) {
                    if (key == "id") {
                        id = value;
                    } else {
                        model = value;
                    }
                });
                modelsOptions += "<option value=" + id + ">" + model + "</option>"
            });
            modelsSelect.innerHTML = modelsOptions;
            jQuery("#model").html = modelsSelect;
        } else {
            alert("false");
        }
    });
});

my returned JSON Format:

Object { id="28", model="test model"}

There could be n number of JSON objects in returned response from ajax call.

One small side note... trying to set the .innerHTML of a <select> element in older Internet Explorer browsers will fail. IE8 and below for sure will fail - I can't remember if this was fixed in IE9 or IE10. — scunliffe
– scunliffe, Commented Nov 9, 2013 at 15:04

Gabriele Petrioli · Accepted Answer · 2013-11-09 14:38:34Z

2

There is no createElement method in jQuery

jQuery.createElement should be document.createElement

Also no need to loop over the objects' properties, you can access them by the key directly

jQuery.each(data, function (index, item) {
    modelsOptions += "<option value=" + item.id + ">" + item.model + "</option>"
});

answered Nov 9, 2013 at 14:38

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

zzlalani · Accepted Answer · 2013-11-09 14:44:18Z

1

Change this

jQuery("#model").html = modelsSelect;

to

jQuery("#model").html(modelsSelect);

Reference

.html()

edited Nov 9, 2013 at 14:44

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

answered Nov 9, 2013 at 14:27

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

1 Comment

Ramin Omrani Over a year ago

still doesn't replace the empty <select id="model"> with the generated one. is my code right?when ajax result is returned there could be n objects with the format above.

Collectives™ on Stack Overflow

Can't create select element with returned json data from Ajax call

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related