Solved

Calling separate javascript functions per OPTION tag in a listBox item

Posted on 2006-11-07
11
284 Views
Last Modified: 2012-06-22
Hi,

I'm using a listBox menu within a DIV to list some options, as follows:

         <select id="listBox" size="10" style="font-family:arial;font-size:11px;display:inline;border:1px solid blue">
            <OPTION value="day1">Day 1
          <OPTION value="day2">Day 2
         </select>

I need to then load some information from an XML file using a function in javascript. The javascript is in a separate file and loads the XML data to the specified DIV ID. However, I need to assign a different function to each list option. Is this possible? How do I allow the user to call separate functions per list item? eg: onChange="" etc.

Any help appreciated.

Thanks
0
Comment
Question by:nhay59
[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
11 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17891694
Use one function for the entire list, but then inside that function you can certainly decide what to do based on which option is selected (including calling another function!)
0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 500 total points
ID: 17891735
<script>
         function doStuff(myValue) {
                   if(myValue == "day1") {
                                 day1function();
                   }
                   if(myValue == "day2") {
                                 day2function();
                   }
         }

         function day1function() {
                  ...
         }

         function day2function() {
                  ...
         }
</script>

<select id="listBox" size="10" style="font-family:arial;font-size:11px;display:inline;border:1px solid blue" onchange=doStuff(this.options[this.selectedIndex].value)>
            <OPTION value="day1">Day 1
         <OPTION value="day2">Day 2
         </select>
0
 

Author Comment

by:nhay59
ID: 17891863
Hi,

Thanks for the reply. I've tried the above code but I still can't load the correct javascript function. I used it as follows,

HTML CODE

<select id="listBox" size="10" onChange="listLoad(this.options[this.selectedIndex].value)" style="font-family:arial;font-size:11px;display:inline;border:1px solid blue">
            <OPTION value="day1">Day 1
                  <OPTION value="day2">Day 2
         </select>

JAVASCRIPT CODE

function listLoad(value)
{            
            if(value == "day1") {
                                 displayOptions();
                   }
                   if(value == "day2") {
                                 displayTools();
                   }
         }


Any ideas why this is still not working correctly? Any help really appreciated.

Thanks
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 18

Expert Comment

by:Morcalavin
ID: 17891906
I'm not sure.  The following works just fine for me:
<script>
function listLoad(value)
{          
          if(value == "day1") {
                                 displayNormal();
                   }
                   if(value == "day2") {
                                 displayCorrections();
                   }
         }


function displayNormal() {
      alert("Day 1 selected");
}


function displayCorrections() {
      alert("Day 2 selected");
}
</script>

<select id="listBox" size="10" onChange="listLoad(this.options[this.selectedIndex].value)" style="font-family:arial;font-size:11px;display:inline;border:1px solid blue">
            <OPTION value="day1">Day 1
               <OPTION value="day2">Day 2
</select>
0
 

Author Comment

by:nhay59
ID: 17892001
Hi,

Thanks for the reply. Yes, you're right. The code works fine when inside the original HTML, but for some reason won't work if referenced from an external javascript file. I've checked the link for the external javascript, and everything is correct there. I must have missed something with the code in the external file. I've added it as follows,

function listLoad(value)
{          
          if(value == "day1") {
                                 displayNormal();
                   }
                   if(value == "day2") {
                                 displayCorrections();
                   }
         }


with the other functions already present in the file. Any ideas why this would not work in a separate javascript file.

Thanks for the help.
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17892138
How are you referencing your.js file.  Past the entire <script> tag please :)
0
 

Author Comment

by:nhay59
ID: 17892234
Hi,

The javascript file is being referenced as follows,

<script src="javascripts/drafts.js" type="text/javascript"></script>

I've tried calling another function in the javascript file, and that loads and works correctly. In fact, if I do a standard onChange="displayNormal()" it works fine. It's only when I try to reference the loadList(...) function that it won't work.

Thanks for the help. It is much appreciated.
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17892271
Have you tried running it in a browser like firefox and checking the script error log?
0
 

Author Comment

by:nhay59
ID: 17893504
Hi,

Thanks for the reply. I've checked the javascript console in Firefox and it says that the 'listLoad' is not defined. I'm not really sure what's wrong with this. Any ideas how to fix this?

Any help appreciated. Thanks
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 17893537
I concur, looks fine to me.  I would suggest checking your .js file and Morcalavin had a great idea about using javascript error log in firefox, it helps a lot.  The included .js file should act just as though the javascript was actually on the page so no problem there.  Be sure the functions you're calling don't have parameters.  Are you getting an error?
0
 

Author Comment

by:nhay59
ID: 17893710
Hi,

Everything all working correct now. There was an error with the external javascript file, but it's all fixed now. Thanks to all for their help, it is much appreciated.

Have a great week.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

707 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