Appending option tags to select tag from array using JQuery

Question

I am trying to create an options drop down list in html using JQuery to append from an Array.

Everything appears to be working correctly apart from the text between the opening & closing tags is not appearing. Am I so tired i'm missing a simple typo or doing something wrong?!?

The JS and JQuery code is:

var displayMenuSelections = function(){
  var menuSelection = menu[0].prices[0];
  var menuItems = Object.keys(menuSelection);
  menuItems.forEach(menuFunction);
}

function menuFunction(item){
  $('#menu').append($('<option value="' + item + '">' + item + '</option'));
}

The result of a typical option tag looks like this (with the 'item' missing between the opening and closing tags):

<option value="Cafe Latte"></option>

VKK · Accepted Answer · 2017-01-11 00:14:56Z

2

You forgot the > for the closing option tag. JQuery tries to close it for you, and in the process the inner item text doesn't get set.

Jquery takes a philosophy where it sort of tries to work with whatever you give it - this can be both good and bad, but in this case it makes it harder to debug since there's no error/exception that is raised.

var displayMenuSelections = function(){
  var menuSelection = menu[0].prices[0];
  var menuItems = Object.keys(menuSelection);
  menuItems.forEach(menuFunction);
}

function menuFunction(item){
  $('#menu').append($('<option value="' + item + '">' + item + '</option>'));
}

edited Jan 11, 2017 at 0:14

answered Jan 11, 2017 at 0:09

VKK

9428 silver badges20 bronze badges

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

1 Comment

PaulWallis42 Over a year ago

Thank you so much, it's late and I'm tired and I swear I checked it like 100 times and couldn't see anything missing! My bad!

Kyrre · Accepted Answer · 2017-01-11 00:00:08Z

-1

It looks to me like you are not passing your parameter

item

to your function

menuFunction(item)

I'm just assuming you are trying to send

var menuSelection

so you can try changing your function call to

menuItems.forEach(menuFunction(menuSelection));

I have not tested this however!

answered Jan 11, 2017 at 0:00

Kyrre

6981 gold badge5 silver badges19 bronze badges

1 Comment

VKK Over a year ago

This is not true. The javascript forEach method passes each element of the object on which it is called to the function. So menuItems.forEach(menuFunction) would pass each element of the menuItems object to menuFunction.

Collectives™ on Stack Overflow

Appending option tags to select tag from array using JQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related