How to use List/Menu boxes

[htmlnoobie3344]

Don't get me wrong, i know how to use them in the sense that i know how to create them, edit them, add like a selectMsg but what i can't figure out is how to check the index of the list box and act accordingly based on the selection. none of the tutorials i've seen about them even tell you how to do that :-( Would you kindly help me out?(+1,000,000,000 if you can figure out where that's from )

[jeffman]

This tutorial explains how to get the value of the selected option. It assumes that you know how to trigger the function, and that you know what to do with the data once you have it.

[htmlnoobie3344]

This tutorial explains how to get the value of the selected option. It assumes that you know how to trigger the function, and that you know what to do with the data once you have it.

Hmmmthanks, mate :-D not australian but love that word :-D (you didn't guess where that line was from...:-() oh well thanks anyways.

[htmlnoobie3344]

I thought i knew how to trigger java function, well the easy ones anyways. I got the element then the value of the element, this case a list box. so...maybe you could help a budding HTMLer out? but hey, it's up to you after all "A man chooses, a slave obeys" God i love that game.

1. this is my java script at the top:<script language="javascript">var main_select = document.getElementById("SEL_MAIN_MENU_FOODS"); <!--Make a variable to get the element we want to check for input-->var IndexValue = main_select.options[main_select.selectedIndex].value;function getInput(){ switch(IndexValue) { case "Appetizers": { alert("you clicked: " + IndexValue); break; } }}this is how i \'m triggering the event.......not sure if that's right, hence why i'm asking the HTML gods for help :-p sorry, weird moold today: <span id="spryselect1"> <label> <select name="SEL_MAIN_MENU_FOODS" tabindex=""size="3" id="SEL_MAIN_MENU_FOODS"> <option value="Appetizers">Appetizers</option> <!--This is the first option available--> <option value="Beverages">Beverages</option> <!--This is the second option to choose from--> </select> </label> <span class="selectRequiredMsg">Please select an item.</span></span> <span class="selectFocusState" onclick="getInput()"></span>

I await your wisedom! (again sorry i'm in a weird mood today)

[jeffman]

You're on the right track, but you've put code in the global space that should be in your function. Specifically:

var main_select = document.getElementById("SEL_MAIN_MENU_FOODS");var IndexValue = main_select.options[main_select.selectedIndex].value;

Both these lines are executed when the page loads, and then never again. So main_select probably is null, because it is trying to access "SEL_MAIN_MENU_FOODS" before that element has been added to the DOM. And even if that were not true, the value of IndexValue has no way to be updated. That assignment is static. It happens once. So if it starts out 0, it will remain 0 for the life of the document. Clicking your span will always have the same result, no matter which option is selected.The solution is simply to move those lines into your function. (The tutorial shows them in a function. I'm surprised you took them out.) Anyway, this bit of tweaking might work:

function getInput(){   var main_select = document.getElementById("SEL_MAIN_MENU_FOODS");   var IndexValue = main_select.options[main_select.selectedIndex].value;   switch(IndexValue)   {	  case "Appetizers":		 alert("you clicked: " + IndexValue);		 break;   }}

The way you're triggering your function is fine. If you want to automate it more, your select element tag might look like this:

<select name="SEL_MAIN_MENU_FOODS" tabindex="" size="3" id="SEL_MAIN_MENU_FOODS" onchange="getInput()">

[htmlnoobie3344]

You're on the right track, but you've put code in the global space that should be in your function. Specifically:

var main_select = document.getElementById("SEL_MAIN_MENU_FOODS");var IndexValue = main_select.options[main_select.selectedIndex].value;

Both these lines are executed when the page loads, and then never again. So main_select probably is null, because it is trying to access "SEL_MAIN_MENU_FOODS" before that element has been added to the DOM. And even if that were not true, the value of IndexValue has no way to be updated. That assignment is static. It happens once. So if it starts out 0, it will remain 0 for the life of the document. Clicking your span will always have the same result, no matter which option is selected.The solution is simply to move those lines into your function. (The tutorial shows them in a function. I'm surprised you took them out.) Anyway, this bit of tweaking might work:

function getInput(){   var main_select = document.getElementById("SEL_MAIN_MENU_FOODS");   var IndexValue = main_select.options[main_select.selectedIndex].value;   switch(IndexValue)   {	  case "Appetizers":		 alert("you clicked: " + IndexValue);		 break;   }}

The way you're triggering your function is fine. If you want to automate it more, your select element tag might look like this:

<select name="SEL_MAIN_MENU_FOODS" tabindex="" size="3" id="SEL_MAIN_MENU_FOODS" onchange="getInput()">

must not of noticed, don't really have a good eye sight thanks againP.S.: don't take this the wrong way as i'm straight up straight but "I love you....." (no homo! :-D)

[jeffman]

No offense taken. :)OTOH, there probably are visitors to the board who will feel injured by "no homo" type remarks. So you might want to ease up on that. We are extremely international, with members of all sexes, ages, colors, etc., so in general we keep -ism humor to a minimum. Just thought you'd want to know.

[htmlnoobie3344]

No offense taken. :)OTOH, there probably are visitors to the board who will feel injured by "no homo" type remarks. So you might want to ease up on that. We are extremely international, with members of all sexes, ages, colors, etc., so in general we keep -ism humor to a minimum. Just thought you'd want to know.

Ok but the no-homo thing meant that i'm not gay it wasn't meant to offend :-(

[jeffman]

I know what you meant. I'm just saying that on this board you have a bigger, more diverse audience than you might have realized. Words that sound one way to you and your friends may sound a different way to members of different communities.In any case, this board is about programming, not cultural awareness. Let's just put this other stuff behind us, okay?

[htmlnoobie3344]

I know what you meant. I'm just saying that on this board you have a bigger, more diverse audience than you might have realized. Words that sound one way to you and your friends may sound a different way to members of different communities.In any case, this board is about programming, not cultural awareness. Let's just put this other stuff behind us, okay?

yea.....sorry, i understand. i say things i shouldn't really say, not really good with people.....but i'm not going to bore you with my life story. I appreciate you setting me straight and not throwing down the BAN hammer already :-D