asked on

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:

<html>
<head>
<title>Polulate List Box</title>
</head>

<body>
<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.
</body>
</html>

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.

ASKER CERTIFIED SOLUTION

Proculopsis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Eghtebas

ASKER

jsfiddle,

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).

Mike