Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Populate a list box on a webpage...

Posted on 2012-04-09
2
Medium Priority
?
165 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…
Suggested Courses

618 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