diades
10-23-2007, 05:40 PM
Hi
Two things, firstly, when in a form you can access the objects directly. Secondly, to get an object on the page it is best to use document.getElementByName("dropdown")[0] (the [0] being that a name can be a collection of elements and tha is the first). That said, when getting a value from a select object, you access the select's options collection [menu.options] and then define which option by stating the selected index [menu.options(menu.selectedIndex)] :
<form id="dropdown" name="dropdown">
<select name="menu" id="menu">
<option value="#" selected>back to top</option>
<option value="1">Link 1</option>
<option value="2">Link 2</option>
<option value="3">Link 3</option>
<option value="4">Link 4</option>
</select>
<input type="button" onClick="location=menu.options(menu.selectedIndex).value;" value="GO">
</form>
However, from what I can see, the value will not be of any use as that is a number and the link is in the text so:
onClick="location=menu.options(menu.selectedIndex).text;"
coothead
10-23-2007, 06:06 PM
Hi there Jim7283,
have a look at this example it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>go there on page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
margin:0;
padding:0;
background-color:#669;
}
#menu {
position:fixed;
margin:20px;
}
#container {
width:420px;
padding:10px;
text-align:justify;
background-color:#fff;
border:1px solid #003;
margin:auto;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html,body {
height:100%;
overflow:auto;
}
#menu {
position:absolute;
margin:30px;
}
</style>
<![endif]-->
<script type="text/javascript">
window.onload=function() {
document.getElementById('menu').onchange=function(){
goThere(this.value);
}
}
function goThere(url){
location.href=url;
}
</script>
</head>
<body>
<div>
<select id="menu">
<option value="#top" selected="selected">back to top</option>
<option value="#cras">Cras</option>
<option value="#nullam">Nullam 2</option>
<option value="#praesent">Praesent</option>
<option value="#class">Class</option>
<option value="#etiam">Etiam</option>
</select>
</div>
<div id="container"><p>
<a name="top"></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p><p>
<a name="cras"></a>Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, orci.
Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum augue non purus.
Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet interdum eros. Pellentesque sit
amet enim id nunc adipiscing ultricies. Quisque lobortis eleifend elit. Sed eu augue sed felis
vulputate iaculis. Cras lorem felis, lobortis id, accumsan vel, facilisis quis, dolor. Curabitur
aliquet. Nulla facilisi. Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa.
Maecenas elementum volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et,
nulla. Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p><p>
<a name="nullam"></a>Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat quis ante. Suspendisse
eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin diam. Curabitur egestas felis
iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin scelerisque. Mauris viverra hendrerit
augue. Morbi eu sapien sed enim rutrum blandit. Quisque feugiat. Pellentesque luctus sagittis est.
Donec dolor sem, bibendum ac, porta in, rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis
at, tincidunt ac, sem.
</p><p>
Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus elementum elit,
vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc dolor quam, venenatis vel,
gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. Nunc pede orci, elementum eget, facilisis
id, viverra vel, leo. Duis eu mauris eget felis lobortis iaculis. Etiam elit metus, posuere ut, tempor
eget, commodo eget, leo. Vivamus elementum. Quisque fringilla orci sit amet nulla.
</p><p>
<a name="praesent"></a>Praesent ut magna ut nibh porttitor vestibulum. Donec ac mauris sit amet elit egestas condimentum. Duis
varius euismod orci. Proin sapien turpis, posuere vitae, tincidunt at, iaculis mattis, magna. Proin
rutrum euismod metus. Maecenas ut ante. Pellentesque tincidunt. Quisque nibh mauris, luctus eu,
elementum in, convallis at, ante. Cras vehicula augue vitae nibh. Suspendisse ut metus. Cras sit amet
neque. Morbi fringilla metus in est. Vivamus eleifend, nunc sit amet faucibus lacinia, ligula massa
fringilla tellus, id pulvinar pede enim posuere sem. Praesent sodales sem et neque. Suspendisse
pellentesque. Nam non justo sit amet turpis imperdiet sodales. Donec libero nisl, porta id, laoreet
faucibus, sodales in, nulla. Aenean molestie, urna sit amet hendrerit sollicitudin, diam lorem
rhoncus ipsum, a euismod pede mi quis sapien. Integer gravida porta eros. Nunc ultrices eros non nisi.
</p><p>
<a name="class"></a>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris
lorem nulla, eleifend ut, placerat eget, cursus porttitor, augue. Duis sollicitudin. Morbi elementum
enim nec libero. Maecenas aliquam turpis sit amet tortor. Morbi vitae metus in metus iaculis ultricies.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus
vel lectus et turpis convallis tempus. Donec placerat. Duis vel nunc. Suspendisse porttitor malesuada
erat. Pellentesque turpis. Quisque leo turpis, feugiat in, suscipit ut, scelerisque vitae, tellus. Ut
nisl ligula, rutrum sit amet, porttitor ut, feugiat ut, est. Quisque et augue. Quisque porttitor metus.
</p><p>
Nullam ultricies mi id nibh. Maecenas nec ante sed erat rhoncus venenatis. Etiam feugiat tempor nibh.
Aliquam consequat. Vestibulum mattis aliquet massa. Pellentesque semper tincidunt magna. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer hendrerit sem.
Mauris at ipsum at nulla condimentum hendrerit. Nam et pede pretium pede semper condimentum. Etiam
eleifend leo eu pede. Maecenas facilisis. Cras bibendum vehicula lorem. Nulla eget ligula vel dolor
tempus hendrerit. Suspendisse mi dolor, congue at, fermentum eget, luctus ac, leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse lobortis metus id diam.
</p><p>
<a name="etiam"></a>Etiam a ipsum at ligula luctus lacinia. Nullam augue ante, semper nec, vulputate eu, fringilla porta,
dolor. Integer libero diam, auctor ac, tincidunt quis, interdum eu, ligula. Nulla facilisi. Proin
eleifend. Pellentesque ligula lorem, feugiat non, mattis vel, pellentesque adipiscing, nisi. Praesent
ullamcorper fermentum neque. Sed pharetra, turpis nec dignissim bibendum, nisl ante feugiat purus, quis
condimentum arcu lectus non ante. Fusce laoreet est non tortor vestibulum viverra. Maecenas diam tellus,
euismod non, placerat sed, euismod in, turpis. Sed a libero.
</p><p>
Sed lorem libero, gravida eget, pretium et, condimentum in, lacus. Sed lectus quam, tincidunt id, tempus
id, accumsan eget, turpis. Praesent mollis tempor elit. Nulla facilisi. Suspendisse potenti. Praesent
quis nunc vitae augue commodo aliquet. Aliquam posuere, libero in egestas vehicula, dui massa semper
risus, id mollis dui nunc et mauris. Vestibulum sodales odio at libero. Ut iaculis eros ac leo. Donec
diam quam, sagittis at, molestie non, bibendum ac, metus. In laoreet, tortor ac viverra consectetuer,
neque urna vehicula odio, vel dignissim magna metus a tortor. Suspendisse nec eros. Phasellus aliquam
viverra libero. Pellentesque consectetuer, dui quis pharetra vestibulum, ante ipsum tempus mauris, quis
vehicula urna nunc eget turpis. Aenean rhoncus, nibh in mattis mollis, nunc tellus malesuada est, id
ultricies arcu dolor eu ipsum. Sed sollicitudin metus ut elit. Etiam consectetuer bibendum nibh.
</p><p>
Curabitur venenatis. Vestibulum eros. Fusce et augue in orci rhoncus gravida. Sed a tortor. Proin congue
mi quis est. Sed dignissim lacus sed arcu. Pellentesque felis elit, rhoncus non, rutrum quis, hendrerit
non, enim. Morbi vestibulum dui a lorem. Duis elementum consequat est. Aliquam erat volutpat. Praesent
eleifend adipiscing nisi. Pellentesque ligula arcu, rutrum vitae, fringilla nec, bibendum eu, risus.
Integer pulvinar gravida orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam congue.
Nullam fringilla odio ac arcu. Donec libero sem, ornare nec, venenatis in, auctor porta, nulla. Donec
turpis nisi, dignissim at, lobortis ut, volutpat et, magna.
</p>
</div>
</body>
</html>
vBulletin® v3.6.7, Copyright ©2000-2009, Jelsoft Enterprises Ltd.