Dynamically add values to SELECT box, appended to body

Question

I'm trying to append values to a SELECT box, that gets dynamically added to the body of a page. A fiddle can be seen here: https://jsfiddle.net/mr2qtmw9/

HTML:

<body>

foo bar

</body>

JS:

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

    $('body').append( "<select id='foo'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#Country').append($('<option>', { value : i }).text(x));
  });

});

The SELECT box gets created, and the $.each() runs through... but the option's don't get added.

What am I missing? (the same code works fine when the select box appears on the initial DOM... it just seems to have an issue when its dynamically injected)

UPDATE: Sorry, I put the wrong ID in the example! On the live script, the ID is "Country", and the selector is "#Country". It still doesn't work on my dev server (much more complex code), so I guess the issue must lie elsewhere :(

UPDATE 2: Doh, this was a big oversight on my part! (sometimes writing up and issue helps you to spot these). I put an alert() inside the function that was doing the work, and found it was running 2 times. Sure enough, after checking the code I found there was a 2nd place I was calling the same function. As such, it WAS adding the options, but to the 1st instance of the SELECT (and the 2nd one was overlapping, so I couldn't see the first one).

I have half a mind to delete this question, as it makes me look so dumb... but I think I'll leave it up, so hopefully it can help save someone else from a similar embarrassment ;)

Thanks guys - that was a boo-boo my end. The actual code has them set correctly. The jsfiddle runs fine now, but my script doesn't (on the server). I'll keep digging — Andrew Newby
– Andrew Newby, Commented Dec 10, 2016 at 10:02
Both answer are correct...please approve any one so it will be helpfull to others — rushil
– rushil, Commented Dec 10, 2016 at 10:05

Ionut Necula · Accepted Answer · 2016-12-10 09:57:35Z

2

You had the id foo on the select but you were using Country when appending the option. This should work:

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

	$('body').append( "<select id='Country'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#Country').append($('<option>', { value : i }).text(x));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

foo bar

</body>

answered Dec 10, 2016 at 9:57

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

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

3 Comments

Andrew Newby Over a year ago

Thanks - that was just me being silly on my jsfiddle. The weird thing, is that that DOES work, yet on my dev site it's not (the code is more complex there, which is why I simplified). Guess I need to did a bit deeper to see whats going on :(

Ionut Necula Over a year ago

I'm glad it worked somehow. But you should post another question maybe with another/more code. Maybe someone can help you. Maybe you forgot to include jQuery on your server.

Andrew Newby Over a year ago

I'm going to accept this one, purely because it was posted 1 minute before the other answer. While it didn't actually "fix" the real issue I was having, it was correct with regards to my boo-boo in the JSFiddle ;)

rushil · Accepted Answer · 2016-12-10 09:58:49Z

1

Just need to change id to foo when you append

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

	$('body').append( "<select id='foo'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#foo').append($('<option>', { value : i }).text(x));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>

foo bar

</body>

answered Dec 10, 2016 at 9:58

rushil

5767 silver badges16 bronze badges

Collectives™ on Stack Overflow

Dynamically add values to SELECT box, appended to body

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related