Populate a list box on a webpage...

I am trying to make a data.js which has only one line of code (needs to include some functions etc with your help):

var groupNames = ["Group 1", "Group 2", Group 3", "Group 4", Group 5"];

In a web page like:

        <title>Polulate List Box</title>

      <h1>Polulate List Box</h1>
      Here, I want to add the necessary code html wise to show a list box
      and populate this list box with data in data.js shown above.

So, when this html runs, it is expected to show:

Polulate List Box

     | Group 1        |
     | Group 2        |
     | Group 3        |
     | Group 4        |
     | Group 5        |

Thank you.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
ProculopsisConnect With a Mentor Commented:
Check out this jsfiddle.

var groupNames = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];

var select = $("<select/>");
$(groupNames).each(function() {


Open in new window

Mike EghtebasDatabase and Application DeveloperAuthor Commented:

Thank you for the speedy response. In the html side, do we need some additional codes?

After the list box is populated, I am hoping to click on the list, depending the selection is Group 1 vs. Group 2, a differnt events to be fired. For now, lets say upon click on Group 2, alert("You selected Group 2"); would pop up.

I don't mean to expand the scope of question. For that, I will post a follow up question. However, I want to have an object of some sort like "ListBox" where a click on it would reaise onclick event.

How your js file is called from the html code?

I guess I need to add:

<select id="mydata">list box data</select>

I have to figure out how to set the attributes of this control to have certain width and also to show droped (displaying all of the data so user doen't have to click on dwon arrow to have all of Group 1 through Group 5 in full view).

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.