We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Calling separate javascript functions per OPTION tag in a listBox item

nhay59
nhay59 asked
on
Medium Priority
313 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
Comment
Watch Question

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

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

Author

Commented:
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.
How are you referencing your.js file.  Past the entire <script> tag please :)

Author

Commented:
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.
Have you tried running it in a browser like firefox and checking the script error log?

Author

Commented:
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
jessegivyDeveloper
CERTIFIED EXPERT

Commented:
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?

Author

Commented:
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.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.