pull down box

**coiL** · Oct 21, 2001, 05:38

I wanted to create a pull down box for 'quick links'. I wasn't sure how to do this myself so I went
searching for a script. The one below is what I found. I have 2 questions though I was wondering if someone could answer for me.

the script:
select name="c614" size="1">
<option selected value="http://url">title</option>
<option value="http://url">title</option>
<option value="http://url">title</option>
<option value="http://url">title</option>
</select>

<input type="button" value="Go" onClick="location=document.c937.c614.options[document.c937.c614.selectedIndex].value"> </p>
</form>

the questions:
a) this is just html isn't it? (I found it on a java script site).
b)I understand most of it(seemed pretty easy once I saw how it was done) but I don't understand the location part. Could someone please explain to me what all of those numbers are.

Any help would be greatly appreciated.

**platinum** · Oct 21, 2001, 06:47

I think you need the rest of it actually, here is the code i would use (from DW).

So technically it IS java...
Hope that helps a little

**Aes** · Oct 21, 2001, 07:27

The numbers are simply references to tell the JavaScript how to function. In your code above you left out the form name, which would be c937; then you have the select name which is c614. Using those, the script knows to do something in form c937 with select c614. Make any sense? If you wanted to, you could rename those numbers to anything you like; "quickjump" and "jumper" for example; basically anything you like so long as you change all of the instances of those numbers or words so that the JavaScript knows how to function.

Alternately, w/out the use of the rather large script Platinum used (Dreamweaver is notorious for using shoddy JavaScript code), you could use this; it is what I use on my sites and allows people to simply select the appropriate option in the dropdown menu and go there w/out having to click on "go":

Code:

<form name="c937">
<select name="c614" size="1" onChange="go()">
<option select="selected" value="http://url">title</option> 
<option value="http://url">title</option> 
<option value="http://url">title</option> 
<option value="http://url">title</option> 
</select> 

<script language="javascript" type="text/javascript">
<!--
function go()
{
location=document.c937.c614.options[document.c937.c614.selectedIndex].value
}
//-->
</script>

<input type="button" name="test" value="Go!"
onClick="go()">
</p>
</form>

See you around the forums!

**htmlite** · Oct 21, 2001, 07:32

Originally posted by platinum
So technically it IS java...

Actually it is javascript. Java is different. Very common misconception though.

<input type="button" value="Go" onClick="location=document.c937.c614.options[document.c937.c614.selectedIndex].value">

Javascript is a "step" script. It takes things from the top to bottom to find information, so here goes...

Location = will be the URL (web address) of the chosen result.

Document = The current page your form is located on.

c937 = The NAME specifed in your FORM tag.

c614 = The NAME specified in the question at hand.

options[infohere] = The specified area is dealing with the OPTIONS tag. The selectedIndex part will find which option was actually chosen.

value = the value of the option that was chosen.

Clearer for ya?

**coiL** · Oct 21, 2001, 07:57

yes that does help a fair bit thank you

I'm not 100% clear but I understand it more then I did before.

Aes, doesn't that script you wrote in, still have a go button? I wouldn't mind getting rid of it if I could.

**mariasplace** · Oct 21, 2001, 18:08

I'm lost when it comes to javascripts. Yet, I have way too many areas on my site to "not" use it for dropdown windows.

Where is the best place to learn how to do this? I tried to understand the code above and I'm lost. I do know HTML coding though.

Most likely I will end up with 6 links containing drop downs.

Thanks much,

**Aes** · Oct 21, 2001, 19:19

Originally posted by coiL
Aes, doesn't that script you wrote in, still have a go button? I wouldn't mind getting rid of it if I could.

Sure; just take the button part out:

Code:

<form name="c937">
<select name="c614" size="1" onChange="go()">
<option select="selected" value="http://url">title</option> 
<option value="http://url">title</option> 
<option value="http://url">title</option> 
<option value="http://url">title</option> 
</select> 

<script language="javascript" type="text/javascript">
<!--
function go()
{
location=document.c937.c614.options[document.c937.c614.selectedIndex].value
}
//-->
</script>

</p>
</form>

The button was basically there as a safe guard against those that don't have JS enabled; but it's usually pretty safe to leave the button out completely.

See you around the forums!

**Aes** · Oct 21, 2001, 19:33

Maria; take a look at these articles by Kevin Yank on SitePoint. They'll get you started.

Then, you can take a look at a more advanced JS Tutorial that deals with Object-Oriented Programming by Ryan Frishberg (only if you're interested of course)

Good luck!

**platinum** · Oct 21, 2001, 20:43

You are too smart aes

**Aes** · Oct 21, 2001, 20:56

Originally posted by platinum
You are too smart aes

Haw! That's quite an overstatement! Where on earth did you get such a silly idea?

**platinum** · Oct 21, 2001, 21:05

Awwwww, my copy an' paste job from dreamweaver wasn't good enough.. and you do it in like 4 lines

ahhh well.

**coiL** · Oct 21, 2001, 23:14

thanks

The SitePoint Forums have moved.

User Tag List

Thread: pull down box

Thread Tools

Display

pull down box

Best Place to Learn JavaScript

Bookmarks

Bookmarks

Posting Permissions