Solved

Calling separate javascript functions per OPTION tag in a listBox item

Posted on 2006-11-07
11
283 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article discusses how to create an extensible mechanism for linked drop downs.
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 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