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!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dropdown box

Status
Not open for further replies.
dmb1

dmb1

Technical User
Sep 19, 2000
55
GB
Hi, I am trying to create a drop down box for my web page which links to various other pages which contain menus. I have created the box with the options but am unsure of where and how to write the href which, for example, links value "1" to c://menu1.

<p class=MsoNormal><SELECT MENU=MENUS>
<OPTION SELECTED VALUE="1"> Oyster Menu
<OPTION VALUE="2"> A La Carte Menu
<OPTION VALUE="3"> Lunch Menu
<OPTION VALUE="4"> Pudding Menu
</SELECT></p>
 
Sort by date Sort by votes
the usual way is to use the URL as the value:
Code: 
<SELECT>
  <OPTION SELECTED VALUE="oyster.html"> Oyster Menu
  <OPTION VALUE="alacarte.html"> A La Carte Menu
  <OPTION VALUE="lunch.html"> Lunch Menu
  <OPTION VALUE="pudding.html"> Pudding Menu
</SELECT>

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
thanks for the advice, when using the url as the value do I then need a 'go' button to activate the link to work as as the moment all I can is just select the option from the box and it does not go to any of the links.
 
Upvote 0 Downvote
You can use a little javascript to accomplish what you want.
Code: 
<html><head>
<script language="JavaScript">
//<!--
function linkMenu(targ,selObj){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");		//function for links list
 
}
//-->
</script>
</head>
<body>
<form>
<select onChange="linkMenu('top',this)">
  <OPTION SELECTED VALUE="oyster.html"> Oyster Menu
  <OPTION VALUE="alacarte.html"> A La Carte Menu
  <OPTION VALUE="lunch.html"> Lunch Menu
  <OPTION VALUE="pudding.html"> Pudding Menu
</select>
</form>
</body>
</html>
Hope this helps

Glen
 
Upvote 0 Downvote
A little more correct coding;
Code: 
<html>
<head>
<script language="JavaScript">
//<!--
function linkMenu(targ,selObj){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");		//function for links list
 
}
//-->
</script>
</head>
<body>
<form>
<select onChange="linkMenu('window',this)">
  <option selected value=""/> Choose Page
  <option value="oyster.html"/> Oyster Menu
  <option value="alacarte.html"/> A La Carte Menu
  <option value="lunch.html"/> Lunch Menu
  <option value="pudding.html"/> Pudding Menu
</select>
</form>
</body>
</html>

Glen
 
Upvote 0 Downvote
best practice is to use a 'go' button, because if you use the 'onchange' event of the select box, you can't navigate with a keyboard.
Code: 
<script type="text/javsacript">
   function jumpTo(gobutton) {
     var URL = gobutton.form.[COLOR=red]url[/color].options[gobutton.form.[COLOR=red]url[/color].selectedIndex].value;
     window.location.href = URL;
  }
</script>
Code: 
<form action="php_jump.php">
  <select name="[COLOR=red]url[/color]">
    <option value="oyster.html" selected="selected"> Oyster Menu</option>
    <option value="alacarte.html"> A La Carte Menu</option>
    <option value="lunch.html"> Lunch Menu</option>
    <option value="pudding.html"> Pudding Menu</option>
  </select>
  <input type="button" value="Go!" onclick="javascript:jumpTo(this)" />
</form>

is good for providing a redundant php jump page for those users who don't have javascript.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
Well my function will also work with a button with a couple small changes.
Code: 
<html>
<head>
<script language="JavaScript">
//<!--
function linkMenu(targ,selObj){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");        //function for links list
 
}
//-->
</script>
</head>
<body>
<form>
<select [COLOR=red]name = Sel[/color] >
  <option selected value=""/> Choose Page
  <option value="oyster.html"/> Oyster Menu
  <option value="alacarte.html"/> A La Carte Menu
  <option value="lunch.html"/> Lunch Menu
  <option value="pudding.html"/> Pudding Menu
</select>
<input type="button" value="Go!" onClick="linkMenu('window',[COLOR=red]Sel[/color])" />
</form>
</body>
</html>

Glen
 
Upvote 0 Downvote
Thanks for the code, all working great. Just one more thing, is it possible to add something to the code so that when the menu is selected (I am going without go button) that it opens the selected url on a new window?
 
Upvote 0 Downvote
Note the changes in the script, this will open the link in a new window using the onchange handler.If you wish a button the code will still work.
Code: 
<html>
<head>
<script language="JavaScript">
//<!--[COLOR=red]
function linkMenu(selObj){ 
var lnk;
lnk = selObj.options[selObj.selectedIndex].value;       
window.open(lnk)[/color]
}
//-->
</script>
</head>
<body>
<form>
<select onChange="[COLOR=red]linkMenu(this)[/color]">
  <option selected value=""/> Choose Page
  <option value="oyster.html"/> Oyster Menu
  <option value="alacarte.html"/> A La Carte Menu
  <option value="lunch.html"/> Lunch Menu
  <option value="pudding.html"/> Pudding Menu
</select>
</form>
</body>
</html>
Hope this helps.

Glen
 
Upvote 0 Downvote
Hmm actually you don't need the function either.
Code: 
<select onChange="window.open(this.options[this.selectedIndex].value)">
Sorry I should've thought of this in the first place.

Glen
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

roniz
  • Locked
  • Question
Joomla! input box text color
Replies
1
Views
239
ChrisHirst
ChrisHirst
TekSupporter
  • Locked
  • Question
Javascript dropdown confusion
Replies
3
Views
337
TekSupporter
TekSupporter
dome11
  • Locked
  • Question
Quicktime Link on iPhone an Image instead of Grey Box? 1
Replies
3
Views
175
BillyRayPreachersSon
BillyRayPreachersSon
suzisweet
  • Locked
  • Question
how can I create a drop down login box?
Replies
4
Views
184
Foamcow
Foamcow
Foamcow
  • Locked
  • Helpful tip
Handy bookmarklet for revealing the box model on an element 1
Replies
2
Views
83
ca8msm
ca8msm

Part and Inventory Search

Sponsor

Back
Top