As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.
Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.
Course Of The Month
7 days, 23 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Javascript dropdown menu link
Posted on 2001-06-05
I am using the following javascript but I need to be able to have multiple dropdown lists on the same page.
<script language="JavaScript">
function pulldown_menu()
{
// Create a variable url to contain the value of the
// selected option from the the form named pulldown and variable selectname
var url = document.pulldown.selectna
// Re-direct the browser to the url value
window.location.href = url
}
</script>
<script language="JavaScript">
function pulldown_menu()
{
// Create a variable url to contain the value of the
// selected option from the the form named pulldown and variable selectname
var url = document.pulldown.selectna
// Re-direct the browser to the url value
window.location.href = url
}
</script>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
5
3
8 Comments
Okay you have a form named pulldown and the select is named selectname
And I assume that you are triggering the function with the onchange event of the select.
with: onChange="pulldown_menu()"
All you have to do is elimnate the hard coded names with
onChange="pulldown_menu(th
And change the function to:
function pulldown_menu(EL)
{
var url = EL.options[EL.selectedInde
// Re-direct the browser to the url value
window.location.href = url
}
Then you can add additional selects in the same format the the present form, or add a new form with additional selects.
Cd&
And I assume that you are triggering the function with the onchange event of the select.
with: onChange="pulldown_menu()"
All you have to do is elimnate the hard coded names with
onChange="pulldown_menu(th
And change the function to:
function pulldown_menu(EL)
{
var url = EL.options[EL.selectedInde
// Re-direct the browser to the url value
window.location.href = url
}
Then you can add additional selects in the same format the the present form, or add a new form with additional selects.
Cd&
Ok, here is my code, what am I doing wrong?
Thanks.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET
<LINK rel="stylesheet" href="style.css" type="text/css">
<TITLE>Top Menu</TITLE>
<script language="JavaScript">
function pulldown_menu(EL)
{
var url = EL.options[EL.selectedInde
// Re-direct the browser to the url value
window.location.href = url
}
</script>
</HEAD>
<body>
<TABLE BORDER="0" width="502">
<tr>
<td align="center">
<img src="images/console_01.jpg
</td>
<td align="center">
<img src="images/console_02.jpg
</td>
<td align="center">
<img src="images/console_03.jpg
</td>
<td class="boldtext" align="center">
Manage Resources
</td>
<td class="boldtext" align="center">
Manage Site
</td>
</tr>
<TR>
<td>
<form name="pulldown">
<select name="selectname" SIZE="1" onChange="pulldown_menu(1)
<option value="">Select Option</option>
<option value="add_report.html">Ad
<option value="">Change Report</option>
<option value="">Delete Report</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(2)
<option value="add_factsheet.html"
<option value="">Add Factsheet</option>
<option value="">Change Factsheet</option>
<option value="">Delete Factsheet</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(3)
<option value="">Select Option</option>
<option value="add_newsitem.html">
<option value="">Change News Item</option>
<option value="">Delete News Item</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(4)
<option value="">Select Option</option>-
<option value="">Images</option>
<option value="">Links</option>
<option value="">Glossary</option>
<option value="">Ratings</option>
<option value="">Disclaimer</optio
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(5)
<option value="">Select Option</option>
<option value="">Manage Emails and Lists</option>
<option value="">Manage Clients</option>
<option value="">View Client Statistics</option>
</select>
</form>
</td>
</TR>
</TABLE>
</body>
</HTML>
Thanks.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET
<LINK rel="stylesheet" href="style.css" type="text/css">
<TITLE>Top Menu</TITLE>
<script language="JavaScript">
function pulldown_menu(EL)
{
var url = EL.options[EL.selectedInde
// Re-direct the browser to the url value
window.location.href = url
}
</script>
</HEAD>
<body>
<TABLE BORDER="0" width="502">
<tr>
<td align="center">
<img src="images/console_01.jpg
</td>
<td align="center">
<img src="images/console_02.jpg
</td>
<td align="center">
<img src="images/console_03.jpg
</td>
<td class="boldtext" align="center">
Manage Resources
</td>
<td class="boldtext" align="center">
Manage Site
</td>
</tr>
<TR>
<td>
<form name="pulldown">
<select name="selectname" SIZE="1" onChange="pulldown_menu(1)
<option value="">Select Option</option>
<option value="add_report.html">Ad
<option value="">Change Report</option>
<option value="">Delete Report</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(2)
<option value="add_factsheet.html"
<option value="">Add Factsheet</option>
<option value="">Change Factsheet</option>
<option value="">Delete Factsheet</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(3)
<option value="">Select Option</option>
<option value="add_newsitem.html">
<option value="">Change News Item</option>
<option value="">Delete News Item</option>
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(4)
<option value="">Select Option</option>-
<option value="">Images</option>
<option value="">Links</option>
<option value="">Glossary</option>
<option value="">Ratings</option>
<option value="">Disclaimer</optio
</select>
</td>
<td>
<select name="selectname" SIZE="1" onChange="pulldown_menu(5)
<option value="">Select Option</option>
<option value="">Manage Emails and Lists</option>
<option value="">Manage Clients</option>
<option value="">View Client Statistics</option>
</select>
</form>
</td>
</TR>
</TABLE>
</body>
</HTML>
<select name="selectname" SIZE="1" onChange="pulldown_menu(4)
Two problems one minor and one major
name="selectname" -- you want to make that name unique to each select to avoid problems maintaining it.
onChange="pulldown_menu(4)
Shoud be onChange="pulldown_menu(th
This is a JavaScript operator that returns the current object so in this context it is the same as:
document.pulldown.selectna
which is why you want a unique name for each select. It then allows the function to be applied to any select where you call it.
Cd&
Two problems one minor and one major
name="selectname" -- you want to make that name unique to each select to avoid problems maintaining it.
onChange="pulldown_menu(4)
Shoud be onChange="pulldown_menu(th
This is a JavaScript operator that returns the current object so in this context it is the same as:
document.pulldown.selectna
which is why you want a unique name for each select. It then allows the function to be applied to any select where you call it.
Cd&
![[Live Webinar] The Cloud Skills Gap](https://filedb.experts-exchange.com/files/public/2017/5/29/3249c5dc-214e-4f8f-afab-ef354630e19f.png)
That worked great. Thanks.
One more question. How can I direct the page that each dropdown goes to a specific frame target called "main"
Thanks.
One more question. How can I direct the page that each dropdown goes to a specific frame target called "main"
Thanks.
Never mind. I figured this last part out.
I put in:
// Re-direct the browser to the url value
parenet.main.href = url
}
I put in:
// Re-direct the browser to the url value
parenet.main.href = url
}
Glad I could help. You help a lot in the process, because you respond back with a good description of how you are. Sometimes we have to ques and it make it tougher.
Thanks for the A. :^)
Cd&
Thanks for the A. :^)
Cd&
COBOLdinosaur,
One follow up question and I'll post it as a new question and give you points if you know the answer.
On the above Javascript is there a way to make it so that after a link is selected from one of the dropdown menus it refreshes the page so that all the dropdown menus go back to there original state, where the term "Select Option" is showing?
Thanks.
One follow up question and I'll post it as a new question and give you points if you know the answer.
On the above Javascript is there a way to make it so that after a link is selected from one of the dropdown menus it refreshes the page so that all the dropdown menus go back to there original state, where the term "Select Option" is showing?
Thanks.
Featured Post
Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition.
To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 23 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
617 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.