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
Solved

Calling separate javascript functions per OPTION tag in a listBox item

Posted on 2006-11-07
11
282 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
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

789 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