js html hookup...

I have:

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

  <body>
      <h1>Polulate List Box</h1>
      
            <select name="drop1" id="Select1" size="6" multiple="multiple">
            <option value="1">Group 1</option>
            <option value="2">Group 2</option>
            <option value="3">Group 3</option>
            <option value="4">Group 4</option>

</select>

  </body>
</html>

Question 1: How can I hook this code to groupData.js file below to dynamically to pull the data from js file.

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

Question 2: How can I add event handler so upon click on an item (Group 2), something like

You clicked on Group 2

to popup.

Thank you.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
Q1: put it in a js file and a method

function populateBox()
{
  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);
}

and then call this method at the ready event of document

$(document).ready(function(){
populateBox();
});

Q2: call this method after calling populateBox() in the same document ready event handler


$(document).ready(function(){
populateBox();
 $("select").onchange(function(){
    //this method will be called when any option is selected
 });
});

check this link
http://jetlogs.org/2007/09/03/jquery-select-boxes-and-change-events/
http://stackoverflow.com/questions/1280499/jquery-set-select-index/1280518#1280518
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
obviousely, I need to do some reading. But for now, could you possibly revise the html below to do the job?

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

  <body>
      <h1>Polulate List Box</h1>
       
            <select name="drop1" id="Select1" size="6" multiple="multiple">
            <option value="1">Group 1</option>
            <option value="2">Group 2</option>
            <option value="3">Group 3</option>
            <option value="4">Group 4</option>

</select>

  </body>
</html>

Is there going to be one js file or two? Under what name?
0
 
Gurvinder Pal SinghCommented:
you don't really need any js file...simply add all the javascript in the script tag
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Well, I am new to this. "simply add all the javascript in the script tag" may be not very simple to me.

If possible, I prefer to have html in one file and js in another. And when I run, it will do this:

When Group 2 is selected, a message to come up saying:

You clicked on Group 2

Where you put: alert("You clicked on Group 2"); additional code will be added to perform some other tasks.

Thank you,

MIke
0
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.