?
Solved

Calling separate javascript functions per OPTION tag in a listBox item

Posted on 2006-11-07
11
Medium Priority
?
286 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 2000 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

777 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