Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

Javascript dropdown menu link

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.selectname.options[document.pulldown.selectname.selectedIndex].value

// Re-direct the browser to the url value
window.location.href = url
}
</script>
0
dovcamp
Asked:
dovcamp
Advertise Here
  • 5
  • 3
1 Solution
 
COBOLdinosaurCommented:
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(this)"

And change the function to:


function pulldown_menu(EL)
{
var url = EL.options[EL.selectedIndex].value

// 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&
0
 
dovcampAuthor Commented:
Ok, here is my code, what am I doing wrong?

Thanks.


<HTML>

<HEAD>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
    <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.selectedIndex].value

// 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" width="87" height="80" border="0" alt="">
      </td>
      <td align="center">
       <img src="images/console_02.jpg" width="87" height="85" border="0" alt="">
      </td>
      <td align="center">
         <img src="images/console_03.jpg" width="87" height="80" border="0" alt="">
      </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">Add Report</option>
            <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">Select Option</option>
            <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">Add News Item</option>
            <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</option>
           </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>
0
 
COBOLdinosaurCommented:
<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(this)"

This is a JavaScript operator that returns the current object so in this context it is the same as:

document.pulldown.selectname

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&

         

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
 
dovcampAuthor Commented:
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.


0
 
dovcampAuthor Commented:
Never mind.  I figured this last part out.

I put in:

// Re-direct the browser to the url value
parenet.main.href = url
}
0
 
dovcampAuthor Commented:
Thanks for all your help.
0
 
COBOLdinosaurCommented:
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&
0
 
dovcampAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Instantly
  • 5
  • 3
Advertise Here
Tackle projects and never again get stuck behind a technical roadblock.
Join Now