Solved

Populate a list box on a webpage...

Posted on 2012-04-09
2
160 Views
Last Modified: 2012-04-09
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.
0
Comment
Question by:Mike Eghtebas
2 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 37823828
Check out this jsfiddle.

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

var select = $("<select/>");
$(groupNames).each(function() {
    select.append($("<option/>").text(this.toString()));
});

$("h1").after(select);

Open in new window

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 37823862
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
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question