Solved

Populate a list box on a webpage...

Posted on 2012-04-09
2
157 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 33

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

705 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now