Valid XHTML 1.1 drop down menus (select and option tag type)

[JAB Creations]

I'm having a doozy of a time trying to get a work drop down menu (select and options tags using a form) to work and validate.

Here is the working but invalid code...

<form name="jump">
<select id="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="go">
<option value="http://www.example.com/1.html">Example 1</option>
<option selected="selected" value="http://www.example.com/2.html">Example 2</option>
<option value="http://www.example.com/3.html">Example 3</option>
<option value="http://www.example.com/4.html">Example 4</option>
<option value="http://www.example.com/5.html">Example 5</option>
</select>
</form>

I figure this will require getelementbyid but I'm really lost at this point!

[JAB Creations]

Figured this out by a bit of surfing, a tiny part of what I do know, and a couple scripts that kinda had what I needed.

Here is the script and the explanation for those who seek this in the future of how it works so as to help others increase their understanding of JavaScript.

<select id="menu">
<option value="http://www.example.com/1.html">Example 1</option>
<option value="http://www.example.com/2.html">Example 2</option>
<option value="http://www.example.com/3.html">Example 3</option>
<option value="http://www.example.com/4.html">Example 4</option>
<option value="http://www.example.com/5.html">Example 5</option>
</select>

<script type="text/javascript">
document.getElementById("menu").onchange = go;
function go()
{ window.location.href = document.getElementById("menu").value; }
</script>

Your select and options tags just have to be minimal with only an ID attribute for the select tag and of course a value for the option tags.

Next we need to use JavaScript to make this select menu do something.

First we have to select the element and in order to adhere to XHTML 1.1 we use JavaScript to select the select menu by it's unique ID...

getElementById...

document.getElementById("menu")

We want our attribute event to be "onchange" and then the JavaScript function which will make the menu work.

So we merely add a dot, our attribute, and then the function.

In English ... we have selected the object (menu), the attributed event (onchange) and the function to be executed when the condition is met (go).

Now all that is left is to create the function "go".

To set a function with a name we have function, the name, and the parenthesis.

function go()

Followed by the squigly brackets (with the function itself between the open/closed squigly brackets).

function go() {}

We know that the attribute "value" of the element "option" (whichever option it be) has the URL we want to send the person.

So as soon as the JavaScript is set to execute this function we have to tell it what we're doing first...

This part of the script in English translates in to "address will go to".

window.location.href

Now we have to tell where we are going to by allowing the script to use the item selected.

This next part is a tad tricky...

Ignore the fact that we have option tags.

Think of it ultimately like <select value="(url)">

The browser kind of skips the option tag because the user has already selected the option. Therefore selected value="".

Therefore when we again tell the browser we want the URL of the select tag, we skip the option. The value is directly associated to the select tag (in which case is referred to as "menu").

document.getElementById("menu").value; }

Add 1 and 1 together...

"address will go to" + <select value="(url)"> = JavaScript rewrites the URL and the browser goes to the desired page!

I hope this helps others out! I tried to explain it using English and basic concepts as best I could because thats how I understand it. I'm NOT by ANY means a programmer. ;)

John

[Bernard Marx]

I'll add a couple of things, John.

I'm not sure what was invalid about the original onchange handler. What may well be invalid is the inclusion of a

[blue]value[/blue]

attribute on the

select

element itself.

You could have shortened the code inside the event handler by using

[blue]this[/blue]

:

onchange="location=[blue]this[/blue].options[[blue]this[/blue].selectedIndex].value"

Meanwhile, if you are attaching a function dynamically:

1) The function will be called with the select element as its execution context, so again you can use

[blue]this[/blue]

to make referencing easier. (It will also free the function from being tied to that element specifically.)

2) Unless you are going to use the function with another element, you can save your global namespace a little by assigning the function directly, as an anonymous function.

3)..

The browser kind of skips the option tag because the user has already selected the option. Therefore selected value="".

Therefore when we again tell the browser we want the URL of the select tag, we skip the option. The value is directly associated to the select tag (in which case is referred to as "menu").

I'm not sure what you mean here (1st part). It works in exactly the same way as it would in an HTML event handler. A couple of the available choices:

this.value
this.options[this.selectedIndex].value

I guess people still use the longer of the two because there may still be browsers around that don't allow you to conveniently read the selected value as a direct property of the select element itself.

document.getElementById("menu").onchange = function() 
{ 
  location.href = this.value;
  //or//this.options[this.selectedIndex].value;
}

[JAB Creations]

Ahh! Good stuff! I'm going with your example instead of what I was playing around with previously. Here is your suggestion in a full working and validating example...

<select onchange="location=this.options[this.selectedIndex].value">
<option value="http://www.example.com/1.html">Example 1</option>
<option selected="selected" value="http://www.example.com/2.html">Example 2</option>
<option value="http://www.example.com/3.html">Example 3</option>
<option value="http://www.example.com/4.html">Example 4</option>
<option value="http://www.example.com/5.html">Example 5</option>
</select>