List Boxes

Ringers · Jul 4, 2006

I am desiging my first web page and hence i am learning as i go.

I am trying to use a list box to open a another local web page "song1.html"(really just a self made text file), from list box "ListOrMenu15". I have looked at other examples on the net and i can't seem to relate them to my code. Any help would be great as i am new to HTML/Javascript. My code is below.

Each option is supposed to open it's own page. From the list box "listOrMenu15". The first page i am trying to open is "song1.html", which should open when "cluster one</option>" is selected.

<select name="ListOrMenu15">
<option value="song1.html">Cluster one</option>
<option value="">What Do You Want From me</option>
<option value="">Poles Apart</option>
<option value="">Marooned</option>
<option value="">A Great Day For Freedom</option>
<option value="">Wearing the Inside Out</option>
<option value="">Take it Back</option>
<option value="">Coming Back to Life</option>
<option value="">Keep Talking</option>
<option value="">Lost For Words</option>
<option value="">High Hopes</option>
<option value=""></option>
<option value=""></option>
</select>

werD420 · Jul 4, 2006

Something Like this should take care of it

Code:

<html>
<head />
<body>
<script type="text/javascript" language="javascript">
function ChangeWindow(){
//The Number of the option that was selected
var selectedindex = ListOrMenu15.selectedIndex
//The Value of the option located at the selected index
var selectedoption = ListOrMenu15.options[selectedindex].value
window.location.href = selectedoption
}

</script>
<select name="ListOrMenu15" onChange="ChangeWindow()">
<option value="song1.html">Cluster one</option>
<option value="">What Do You Want From me</option>
<option value="">Poles Apart</option>
<option value="">Marooned</option>
<option value="">A Great Day For Freedom</option>
<option value="">Wearing the Inside Out</option>
<option value="">Take it Back</option>
<option value="">Coming Back to Life</option>
<option value="">Keep Talking</option>
<option value="">Lost For Words</option>
<option value="">High Hopes</option>
<option value=""></option>
<option value=""></option>
</select>
</body>
</html>

MCP, .Net Solutions Development <%_%>

tsuji · Jul 4, 2006

To open a windows with the selected options, you can put a line like this in a handler.
[tt]
window.open(document.formname.ListOrMenu15.value);
[/tt]
If you want to change the existing page, it is this.
[tt]
window.location.href=document.formname.ListOrMenu15.value;
[/tt]

Ringers · Jul 23, 2006

This is still not working, what am i missing?

</HEAD>

<BODY bgcolor="#000000" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<script type="text/javascript" language="javascript">
function ChangeWindow(){
//The Number of the option that was selected
var selectedindex = ListOrMenu15.selectedIndex
//The Value of the option located at the selected index
var selectedoption = ListOrMenu15.options[selectedindex].value
window.location.href = selectedoption
}

</TD><TD bordercolorlight="#FFFFFF" height="25" valign="top">

<select name="ListOrMenu15" onChange="ChangeWindow()">
<option value="song1.html">Cluster one</option>
<option value="">What Do You Want From me</option>
<option value="">Poles Apart</option>
<option value="">Marooned</option>
<option value="">A Great Day For Freedom</option>
<option value="">Wearing the Inside Out</option>
<option value="">Take it Back</option>
<option value="">Coming Back to Life</option>
<option value="">Keep Talking</option>
<option value="">Lost For Words</option>
<option value="">High Hopes</option>
<option value=""></option>
<option value=""></option>
</select>
</TD></TR>
</TABLE>

tsuji · Jul 23, 2006

[tt]
<script type="text/javascript" language="javascript">
function ChangeWindow(obj){
window.location.href = obj.value;
}
[red]</script>[/red]
<select name="ListOrMenu15" onChange="ChangeWindow([red]this[/red])">
[/tt]
[0] Close the script tag---a must do.

[1] I pass a parameter because you do not show any form. The reference ListOrMenu15 is of limited applicability and will not work in agent other than ie. You have to reference to it by the path like document.formname.ListOrMenu15.

[2] You do not assign value to most of the option. Assign some valid url to them to arrive to the conclusion of "not working..."!

Ringers · Jul 24, 2006

I am posting all my code. If someone can tell me why i can't open a new page when clicking the selecting from the combo box. I don't want to use a 'go' button.

I have look on the Internet and keep finding different solutions that don't work.Thanks.

<HTML>
<HEAD>
<TITLE>
Cam's Floyd Guitar Tabs
</TITLE>

</HEAD>

<BODY bgcolor="#000000" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<script type="text/javascript" language="javascript">
function ChangeWindow(obj){
window.location.href = obj.value;
//The Number of the option that was selected
var selectedindex = ListOrMenu15.selectedIndex
//The Value of the option located at the selected index
var selectedoption = ListOrMenu15.options[selectedindex].value
window.location.href = selectedoption
}

</script>

<div id="Layer6" style="position:absolute; left:4px; top:502px; width:1017px; height:94px; background-color:#000000; z-index:5">
<TABLE width="1005" bgcolor="#FFFFFF" border="1" cellpadding="1" bordercolorlight="#FF0000" bordercolordark="#FF0000" cellspacing="2">
<TR>
<TD bordercolorlight="#FFFFFF" width="157" height="34" valign="top">
<div align="CENTER">Wish You Where Here</div>
</TD><TD bordercolorlight="#FFFFFF" width="88" height="34" valign="top">
<div align="CENTER">Relics</div>
</TD><TD bordercolorlight="#FFFFFF" width="100" height="34" valign="top">
<div align="CENTER">Animals</div>
</TD><TD bordercolorlight="#FFFFFF" width="127" height="34" valign="top">
<div align="CENTER">The Wall</div>
</TD><TD bordercolorlight="#FFFFFF" width="162" height="34" valign="top">
<div align="CENTER">The Final Cut</div>
</TD><TD bordercolorlight="#FFFFFF" width="201" height="34" valign="top">
<div align="CENTER">Momentery Lapse of Reason</div>
</TD><TD bordercolorlight="#FFFFFF" height="34" valign="top">
<div align="CENTER">The Divison Bell</div>
</TD></TR>
<TR>
<TD bordercolorlight="#FFFFFF" width="157" height="25" valign="top">
<select name="ListOrMenu9">
<option value="">Shine on You Crazy Diamond I-V</option>
<option value="">Welcome To Machine</option>
<option value="">Have a Cigar</option>
<option value="">Shine on You Crazy Diamond VI-IX</option>
</select>
</TD><TD bordercolorlight="#FFFFFF" width="88" height="25" valign="top">
<select name="ListOrMenu10">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="100" height="25" valign="top">
<select name="ListOrMenu11">
<option value="">Pigs on the Wing Pt1</option>
<option value="">Dogs</option>
<option value="">Pigs</option>
<option value="">Sheep</option>
<option value="">Pigs on the Wing Pt2</option>
</select>
</TD><TD bordercolorlight="#FFFFFF" width="127" height="25" valign="top">
<select name="ListOrMenu12">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="162" height="25" valign="top">
<select name="ListOrMenu13">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="201" height="25" valign="top">
<select name="ListOrMenu14">
<option value="">Signs of Life</option>
<option value="">Learning to Fly</option>
<option value="">The Dogs of War</option>
<option value="">One Slip</option>
<option value="">On the Turning Away</option>
<option value="">Yet Another Movie/ Round & Round</option>
<option value="">A New Machine Pt1</option>
<option value="">Terminal Frost</option>
<option value="">A New Machine Pt2</option>
<option value="">Sorrow</option>
</select>
</TD><TD bordercolorlight="#FFFFFF" height="25" valign="top">

<select name="ListOrMenu15" size="1" onChange="changewindow(this)">
<option value="song1.html">Cluster one</option>
<option value="">What Do You Want From me</option>
<option value="">Poles Apart</option>
<option value="">Marooned</option>
<option value="">A Great Day For Freedom</option>
<option value="">Wearing the Inside Out</option>
<option value="">Take it Back</option>
<option value="">Coming Back to Life</option>
<option value="">Keep Talking</option>
<option value="">Lost For Words</option>
<option value="">High Hopes</option>
<option value=""></option>
<option value=""></option>
</select>
</TD></TR>
</TABLE>
</div>
<div id="group" style="position:absolute; left:227px; top:159px; width:568px; height:338px; z-index:4">
<img src="group.jpg" width="568" height="338" border="0" name="Image_group"></div>
<div id="Layer5" style="position:absolute; left:6px; top:82px; width:1009px; height:76px; background-color:#000000; z-index:3">
<TABLE width="1003" bgcolor="#FFFFFF" border="1" cellpadding="1" bordercolorlight="#FF0000" bordercolordark="#FF0000" cellspacing="2">
<TR>
<TD bordercolorlight="#FFFFFF" width="169" height="36" valign="top">
<div align="CENTER">Piper at the Gates of Dawn</div>
</TD><TD bordercolorlight="#FFFFFF" width="130" height="36" valign="top">
<div align="CENTER">Saucerfull of Secrets</div>
</TD><TD bordercolorlight="#FFFFFF" width="41" height="36" valign="top">
<div align="CENTER">More</div>
</TD><TD bordercolorlight="#FFFFFF" width="89" height="36" valign="top">
<div align="CENTER">Ummagamma</div>
</TD><TD bordercolorlight="#FFFFFF" width="124" height="36" valign="top">
<div align="CENTER">Atom Heart Mother</div>
</TD><TD bordercolorlight="#FFFFFF" width="49" height="36" valign="top">
<div align="CENTER">Meddle</div>
</TD><TD bordercolorlight="#FFFFFF" width="134" height="36" valign="top">
<div align="CENTER">Obsurced by Clouds</div>
</TD><TD bordercolorlight="#FFFFFF" width="118" height="36" valign="top">
<div align="CENTER">Dark Side of the Moon</div>
</TD></TR>
<TR>
<TD bordercolorlight="#FFFFFF" width="169" height="19" valign="top">
<select name="ListOrMenu1">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="130" height="19" valign="top">
<select name="ListOrMenu2">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="41" height="19" valign="top">
<select name="ListOrMenu3">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="89" height="19" valign="top">
<select name="ListOrMenu4">
<option value="">Astronomy Domine</option>
<option value="">Careful with that Eugene</option>
<option value="">Set Controls for the Heart of the Sun</option>
<option value="">A Saucerful of Secrets</option>
</select>
</TD><TD bordercolorlight="#FFFFFF" width="124" height="19" valign="top">
<select name="ListOrMenu5">
<option value="">One of These Days</option>
<option value="">A Pillow of Winds</option>
<option value="">San Tropez</option>
<option value="">Fearless</option>
<option value="">Seamus</option>
<option value="">Echoes</option>
</select>
</TD><TD bordercolorlight="#FFFFFF" width="49" height="19" valign="top">
<select name="ListOrMenu6">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="134" height="19" valign="top">
<select name="ListOrMenu7">
</select>
</TD><TD bordercolorlight="#FFFFFF" width="118" height="19" valign="top">
<select name="ListOrMenu8">
<option value="">Speak to Me</option>
<option value="">Breathe</option>
<option value="">On The Run</option>
<option value="">Time</option>
<option value="">Great Gig in the Sky</option>
<option value="">Money</option>
<option value="">Any Color You Like</option>
<option value="">Brain Damage</option>
<option value="">Elcipse</option>
</select>
</TD></TR>
</TABLE>
</div>
<div id="Layer4" style="position:absolute; left:10px; top:82px; width:0px; height:0px; background-color:#000000; z-index:2">
<TABLE width="974" bgcolor="#FFFFFF" cellpadding="1" bordercolorlight="#FFFFFF" bordercolordark="#000000" cellspacing="2">
<TR>
<TD width="98" valign="top">
Piper at the Gate of Dawn</TD><TD width="22" valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD></TR>
<TR>
<TD width="98" valign="top">
</TD><TD width="22" valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD><TD valign="top">
</TD></TR>
</TABLE>
</div>
<div id="Layer3" style="position:absolute; left:395px; top:21px; width:234px; height:55px; z-index:1">
<img src="Image12690227.gif" width="234" height="55" border="0" name="Image_Layer3"></div>
</BODY>
</HTML>

tsuji · Jul 24, 2006

[1] Do you see the difference in the function name?
>[tt]<select name="ListOrMenu15" size="1" onChange="[highlight]c[/highlight]hange[highlight]w[/highlight]indow(this)">[/tt]
>[tt]function ChangeWindow(obj){ [/tt]

[2][tt]
function ChangeWindow(obj){
window.location.href = obj.value;
/*
//The Number of the option that was selected
var selectedindex = ListOrMenu15.selectedIndex
//The Value of the option located at the selected index
var selectedoption = ListOrMenu15.options[selectedindex].value
window.location.href = selectedoption
*/
}
[/tt]
[3] Your select-one most options do not have a value. Do you hear this message? Should I repeat again? and the value control where you want it to go.

Ringers · Jul 24, 2006

Thanks tsuji, i missed the captials letter on changewindow. The other options are blank cuase i wantted to get one working first then do the others.

Thanks again.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

List Boxes

Ringers

Technical User

werD420

Technical User

tsuji

Technical User

Ringers

Technical User

tsuji

Technical User

Ringers

Technical User

tsuji

Technical User

Ringers

Technical User

Similar threads

Part and Inventory Search

Sponsor