CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: select menu

  1. 05-09-2005, 02:49 PM #1
    blueandconfused
    blueandconfused is offline New Comer (less than 5 posts)
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default select menu

    How do I get the select menu to go to a website from the selection chosen. here is my code that i have done but i cant get it to work. any suggestions? thanks.
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>  Best Friend Pets - Rabbits </title>
<link rel="stylesheet" href="main.css"type="text/css"/>
<script type="text/javascript" language="JavaScript">
<!--
var chosenSite = "";
function getSelectValue(formname,selectname){
	var theMenu = document[formname][selectname];
	var selecteditem = theMenu.selectedIndex;
	return theMenu.options[selecteditem].value;
	}//end function
function showSelectValue(formname,selectname,thevalue){
	var theMenu = document[formname][selectname];
	for (i=0; i<theMenu.options.length;i++){
		var temp = theMenu.options[i].value;
		if (temp == theValue){
		theMenu.selectedIndex = i;
		}//end if
	}//end for
}//end function
function openSite(){
	chosenSite = getSelectValue("breeds","rabbits");
	window.location.href = chosenSite;
	}//end function
//-->
</script>
</head>
<body bgcolor="#99CCFF" onLoad="window.defaultStatus=document.title">
<table border="0"  width = 95% cellpadding="0" cellspacing="0">
<tr>
<td colspan="1"> <a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true" 
onMouseout="window.status=' '; return true"><img src="images\logo.png" height="90" width="90" alt="Click here to go to the BFP Homepage"></a></td>
<td colspan="1"><h1 align="center"><font color="#000099" size="12pz"> Best Friend Pets, Inc.</font> </h1></td>
</tr>
<tr>
<td width="10%" valign="top"><b>
<br />
<br />
	<h4><a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true" 
onMouseout="window.status=' '; return true">Home</a>
	<br />
	<br />
	<br />
	<a href="dogs.html" onMouseover="window.status='Dogs'; return true" 
onMouseout="window.status=' '; return true">Dogs</a>
	<br/>
	<br />
	<br />
	<font color="#000099" onMouseover="window.status='Rabbits'; return true" 
onMouseout="window.status=' '; return true">Rabbits</font>
	<br/>
	<br />
	<br />
	<a href="cats.html" onMouseover="window.status='Cats'; return true" 
onMouseout="window.status=' '; return true">Cats</a> 
	<br/>
	<br />
	<br />
	<a href="donkeys.html" onMouseover="window.status='Donkeys'; return true" 
onMouseout="window.status=' '; return true">Donkeys</a> 
	<br/>
	<br />
	<br />
	<a href="cows.html" onMouseover="window.status='Cows'; return true" 
onMouseout="window.status=' '; return true">Cows</a> </h4>
	<br/>
	<br />
	<br />
	</b>
</td>
<td width="50%" valign="top">
<div>
	<h4>Recognized Breeds</h4>
<form name="breeds"></form>
<select name="rabbits">					
<option value="http://www.geocities.com/doubledutchinfo/breedsamerican.html">American</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsafl.html">American Fuzzy Lop</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsamsable.html">American Sable</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangeng.html">Angora- English</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangfre.html">Angora- French</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsanggiant.html">Angora- Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangsatin.html">Angora- Satin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbelhare.html">Belgian Hare</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbeveren.html">Beveren</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbritpetite.html">Britannia Petite</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscalifornian.html">Californian</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschampagne.html">Champagne D'Argent</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscheckgiant.html">Checkered Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschinam.html">Chinchilla- American</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschingiant.html">Chinchilla- Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschinstd.html">Chinchilla- Standard</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscinnamon.html">Cinnamon</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscreamargent.html">Cream D' Argent</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsdutch.html">Dutch</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsdwarfhotot.html">Dwarf Hotot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsengspot.html">English Spot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsflemgiant.html">Flemish Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsfloridawht.html">Florida White</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsharlequin.html">Harlequin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshavana.html">Havana</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshimalayan.html">Himalayan</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshollop.html">Holland Lop</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshotot.html">Hotot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsjwooly.html">Jersey Wooly</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslilac.html">Lilac</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopseng.html">Lop, English</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopsfre.html">Lop, French</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopsmini.html">Lop, Mini</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsminirex.html">Mini Rex</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsnethdwarf.html">Netherland Dwarf</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsnewzea.html">New Zealand</option>
<option value="http://www.geocities.com/doubledutchinfo/breedspal.html">Palomino</option>
<option value="http://www.geocities.com/doubledutchinfo/breedspolish.html">Polish</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsrex.html">Rex</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsrhine.html">Rhinelander</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssatin.html">Satin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilver.html">Silver</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilvfox.html">Silver Fox</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilvmart.html">Silver Marten</option>
<option value="http://www.geocities.com/doubledutchinfo/breedstan.html">Tan</option>
<input type="button" name="breeds" value="Go There!" onclick="openSite();">
</select>

<h4>Unrecognized Breeds</h4>
German Angora<br />
Hulstlander<br />
Lion Head<br />
Mini Plush Lop<br />
<a href="http://www.geocities.com/doubledutchinfo/breedssatinmini.html">Mini Satin</a><br />
Perlfee<br />
Royal Lop<br />
Thrianta<br />
Velveteen Lop<br />

<br />
<br />
<a href="#" onClick="history.go(-1)" onMouseover="window.status='Go Back!'; return true" 
onMouseout="window.status=' '; return true">< Back</a> 
<br />
<br />
					
					</div>
</td>
</tr> 
</table>
<center><font face="Century Gothic"><b><a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true" 
onMouseout="window.status=' '; return true">Home</a> | <a href="dogs.html" onMouseover="window.status='Dogs'; return true" 
onMouseout="window.status=' '; return true">Dogs</a> | Rabbits | 
<a href="cats.html" onMouseover="window.status='Cats'; return true" 
onMouseout="window.status=' '; return true">Cats</a> |  <a href="donkeys.html" onMouseover="window.status='Donkeys'; return true" 
onMouseout="window.status=' '; return true">Donkeys</a> | <a href="cows.html" onMouseover="window.status='Cows'; return true" 
onMouseout="window.status=' '; return true">Cows</a></b></font></center>
</body>
</html>
    Reply With Quote Reply With Quote
  2. 05-09-2005, 07:59 PM #2
    mwinter
    mwinter is offline Elite Coders
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by blueandconfused
    How do I get the select menu to go to a website from the selection chosen. here is my code that i have done but i cant get it to work. any suggestions?
    Well, your markup is invalid, so it's not that surprising that nothing happens.

    <script type="text/javascript" language="JavaScript">
    The language attribute is deprecated and redundant. Just use the type attribute.

    <!--
    Using SGML comment delimiters to "hide" scripts is equally deprecated and unnecessary. Moreover, if you actually served your XHTML document as XHTML, your script would be completely ignored, so it's not a good habit to get in to.

    var chosenSite = "";
    Why did you make this variable global? It has no use outside of the openSite function, so it shouldn't be granted wider scope. In fact, a variable is redundant as the result of the function call can be assigned to the href property of the location object directly.

    function getSelectValue(formname,selectname){
    var theMenu = document[formname][selectname];
    It is better to use the forms and elements collections:

    Code:
    var theMenu = document.forms[formname].elements[selectname];
    That said, it isn't necessary in this case. I'll demonstrate later.

    <form name="breeds"></form>
    You've closed the form. I think you'll agree that this is a mistake.

    All form elements must have an action attribute, and you should use this to point to a redirection service which can forward the user if they have client-side scripting disabled. There are free services that can perform this. A few are listed below, and the first is used in the example. However, you should register (it's free) before you actually use the service.



    <input type="button" name="breeds" value="Go There!" onclick="openSite();">
    </select>
    You cannot place an input element inside a select element. I also think 40+ options is rather much for this sort of navigation technique. Anyway...

    Code:
    function goTo(list) {
  var i = list.selectedIndex,
      u;

  if(-1 != i) {
    u = list.options[i&#93;.value;

    /* You can skip this test, especially if every option element
     * will always have a URL as its value attribute. However,
     * for this generic demonstration, it's more robust to show it.
     */
    if(u && /^https?:\/\/[^.]+(\.[^.])+/.test(u)) {
      location.href = u;
    }
  }
}
    HTML Code:
    <form action="http://jbox.yourcgi.com/jbox.cgi" method="post"
 onsubmit="goTo(this.elements['url']); return false;">
  <select name="url">
  <option value="http://www.google.com/">Google</option>
  </select>
  <input type="submit" value="Go!">
</form>
    Hope that helps,
    Mike
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules