CODEWITHSUNDEEP
javascriptjquerydom
GVillani82
GVillani82

Reputation: 17429

Appending option to select field using jQuery

I'm using this code:

var tempObj = {
    "noselected" : "",
    "option1": "item1",
    "option2": "item2",
    "option3": "item3"
};

$.each(tempObj, function (val, text) {
            $(this).append($('<option />', {
                value: val,
                text: text
            }));
        });

but when that code is executed I obtain the following error:

TypeError: n.createDocumentFragment is not a function
[Break On This Error]   

...eturn t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=...

And only the first element is not appended.

Upvotes: 0

Views: 67

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to do it this way -

$.each(tempObj, function (val, text) {
    $('<option />', {
        value: val,
        text: text
    }).appendTo('select');
});

Demo ---> http://jsfiddle.net/zKkXp/2/

As of your comment - you are doing that in click handler and trying to access clicked select with this inside each , You can do it this way -

$('select').click(function () {
    var $this = $(this);
    $.each(tempObj, function (val, text) {
        $this.append($('<option />', {
            value: val,
            text: text
        }));
    });
});

Demo ---> http://jsfiddle.net/zKkXp/4/

Upvotes: 3

Bhushan Firake
Bhushan Firake

Reputation: 9448

$.each(tempObj, function (val, text) {
    $('select').append($('<option>', { 
        value: val,
        text : text 
    }));
});

Upvotes: 0

Related Questions