附加选项标签以使用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>

Answer 1

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>'));
}

Answer 2

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!