Trouble dynamically adding options to select

Question

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="../jquery-1.4.4.min.js" />
    <script type="text/javascript">        
        function click(){
            var select = document.getElementById("select");
            var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]];
            json = JSON.parse(json);
            select.options.length = 0;
            for(var i=0; i<json.length; i++) {
                $("#select").append(new Option(json[i][0], json[i][1], false, false));
            }
        }   
    </script>

    <body>
        <select id="select"></select>
        <input type="button" onclick="click()" />
    </body>
</html>

I'm trying to add options to the select element, but to no avail.

since you're really not using jQuery except for that one line, why not go straight JS? — hunter
– hunter, Commented Jan 10, 2011 at 14:43

user113716 · Accepted Answer · 2011-01-10 14:36:05Z

3

This won't work, because it isn't actually JSON data. It is a javascript Array:

var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]];
   // json = JSON.parse(json);
   //    ^-----Eliminate the second line.

Also, you shouldn't use click for the method name. It will interfere in some browsers.

Working Example: http://jsfiddle.net/hdX84/

answered Jan 10, 2011 at 14:36

user113716

323k64 gold badges454 silver badges441 bronze badges

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

4 Comments

lowerkey Over a year ago

Thanks for the working example! It worked on jsfiddle, but when I copied the code verbatim, it didn't work. Are there any other issues at play here? I'm using chrome to test this.

user113716 Over a year ago

@Joshua: Did you remember to change the name of the method in your inline onclick attribute? In the example I changed it from click to click_me since using click will fail in some browsers.

lowerkey Over a year ago

I replaced click with $(document).ready(...) for the option-adding-trigger.

user113716 Over a year ago

@Joshua: I'm not sure what you mean. I still wouldn't use click as an identifier. Without seeing your actual code, I won't be able to tell what's wrong. I'd suggest you first test it with the inline attribute. By the way, if you placed the click function inside $(document).ready(), your inline attribute won't be able to see it. It needs to be global.

TiGoRn · Accepted Answer · 2011-01-10 14:41:05Z

2

i'd do

var mySel = $('#select')[0];
for(var i=0; i<json.length; i++){
        mySel.append(whatever);
    }

for more efficiency, because $('select') would always search through the DOM. Doesn't really matter for 10 entries, but for large pages I'd try do efficient from the start.

answered Jan 10, 2011 at 14:41

TiGoRn

4510 bronze badges

2 Comments

hunter Over a year ago

you can't call append() on a DOM object, that's a jQuery method. Doing the get [0] of the jQuery selector returns the DOM element

user113716 Over a year ago

This also really should be posted as a comment since it doesn't deal with the issue at hand. I understand that you don't have enough rep to comment yet, but you still shouldn't abuse the Answers section. Since you only need 50 rep to comment, it shouldn't take long.

Felix Kling · Accepted Answer · 2011-01-10 14:43:18Z

1

This is wrong:

var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]];
json = JSON.parse(json);

You don't have JSON. You have an array of arrays. It would only be JSON if it was enclosed in single quotes (i.e. if it was a string).

var data = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]];
for(var i=0; i<data.length; i++){
    $("#select").append($('<option />',{value: json[i][1], text: json[i][0]}));
}

edited Jan 10, 2011 at 14:43

answered Jan 10, 2011 at 14:37

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

Trouble dynamically adding options to select

3 Answers 3

4 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Related