davesite.com / webstation / JavaScript Tutorial


Theory and Drop Down List URL Jump Box


Basic JavaScript Theory

Just a note, my new tutorials on Coding and Web Design will be found at CrazyButLazy Digital Designs, encouraging people to use HTML, CSS, and JavaScript together.


Need a better web host, or just starting out and looking for the perfect match?

iPage servers are amazingly fast and one of the best deals out there.

Check them out: iPage Web Hosting only $1.99/month!

JavaScript won't work in *all* web browsers, although it will work in most. It's a good idea not to make a web page dependent on JavaScript.

There are three important basic concepts you *must* understand to make any sense of JavaScript: objects, events, and functions.

Let's run through a simple explanation, and then get on to a real world example.

Imagine you have a pencil (object) and you wish to sharpen it (function). You place the pencil in the sharpener (event), and wham, the sharpener performs the function of sharpening it.

<pencilsharpener OnPencilEntry="SharpenPencil()">

Of course, pencilsharpener doesn't exist in JavaScript, nor does the event OnPencilEntry or the function SharpenPencil. But programming in JavaScript is just as simple as following these basic concepts.

Lots of things are objects: forms, buttons, lists, windows, documents, etc.

There are also plenty of events: OnClick, OnChange, OnMouseOver, etc.

So let's stop with the theory and get to work.

Drop Down List URL Jump Box

Scenario: I have three web sites I want to link to. I also don't want to bore my friends by having them all lined up in a row, or in a long unordered list. I want them to click a little drop down box, and have that site automatically load.

To accomplish this, I need to use a blank form, and I need to place a selection list on it. I need to add options for each of the three sites, and then I need to do a little JavaScript magic.

Caution: Why do I need a form? Compatibility. Without the form surrounding the drop down list, some browsers will refuse to allow the JavaScript to work properly.

Form and List without JavaScript

<form name="jump1">
<select name="myjumpbox">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

Okay, well, now all we need to do is politely ask the web browser software change the current page location (address) to the one selected when someone chooses something from the drop down box. We'll use the event OnChange.

<form name="jump1">
<select name="myjumpbox"
 OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

Feel free to try the jump box, and hit the back button to return to this page.

You are probably feeling a little like I did the first time I used this code. What does all of that line of gibberish mean?

OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value"

Here's the simple explanation. OnChange is the event. location.href is the browser's current location. We are telling the browser to look at jump1 (our form), then look at myjumpbox on jump1 (our listbox), then figure out which of our options is selected, and then copy whatever value that option has into the browser's current location.

So if we choose davesite.com, the browser gets this:

location.href=http://www.davesite.com/

Cha-Ching. We're at davesite.com.

Note: If you're using frames, and you want the link selected to load in the entire window and not just inside the current frame, change location.href to top.location.href.

If we want to be slick, we can tell the browser to open the page into a new browser window.

<form name="jump2">
<select name="myjumpbox"
 OnChange="window.open(jump2.myjumpbox.options[selectedIndex].value)">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

It sure looks silly, but all jump2.myjumpbox.options[selectedIndex].value holds is the value of the currently selected drop down list item.

Here's an interesting modification to our original code. Want to show more than one option at the same time? Throw out the Please Select Option, and add a size. If you want 3 options shown, add size=3.

<form name="jumpopt">
<select name="myjumpbox" size="3"
 OnChange="location.href=jumpopt.myjumpbox.options[selectedIndex].value">
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>



Last Section: Introduction

Back to the Guide

Next Section:
JavaScript Basics: Variables, Button Actions, Alerts

Our complete set of http://www.pass4sure.com/PMI-001.html and http://www.actualtests.com/certs/SCWCD-training-certification.htm guides you in exact way so you will pass your real http://www.test-king.com/exams/70-664.htm exam. Our http://www.certkiller.com/MCPD-certification-training.htm help you to pass http://www.examsheets.com/certification/RHCE.htm exams.