Drop down menu with description

Hi friends, can you please paste the code or send me the code about "creating drop down menu with description". HTML and javascript will be used.

It is like when someone clicks on the drop down menu, the content will appear in the same page. I really need this code urgently.

Anyone please help me out.

Thanks in advance.

Regards
gedet

 

I'm not entirely sure what you mean by 'when someone clicks on the drop down menu, the content will appear in the same page.'

Could you clarify or provide an example of a site that has the functionality you're looking for?

If you're looking for a simple drop-down menu, there are plenty of tutorials if you search google for 'html javascript dropdown menu.' You can even make drop-down menus without javascript, using css - search for 'css dropdown menu no javascript'

 

Hi irving,

Thanks for reply. I really appreciate it. After searching for solution in the google, I managed to create one demo but instead of content it was an image, please visit this link to see what kind of drop down menu with description I am talking about - http://gedetbasumatary.com/wp-content/data/test1.html

Now you see that if some one selects the particular title from the drop down menu, the image on the sidebar changes automatically. I want to do the same thing but now I want to change the content not the image.

Hope you can find some solution. Others are also requested to contribute if they know.

 

Ah, I understand.

Okay, this is what you need to do.

For your dropdown box, you will have the following code:

<form>
<select name="subject" onchange="goToPage(this.value);">
    <option value="-1" selected="selected">Select a Page to View</option>
    <option value="page1.html">page1</option>
    <option value="page2.html">page2</option>
    <option value="page3.html">page3</option>
</select>
</form>

Code (markup):

Whenever the user selects an option, the goToPage() javascript function will be called. This function should go in the head tags of your page and look like this:

<script language="JavaScript">
    function goToPage($page){
        if($page != -1){
          location = $page;
        }
}
</script>

Code (markup):

Let me know how that works for you.

 

Irving Hi again!

Appreciated. Well that's exactly I am not looking at. The code you gave me takes to another page like page1, page2, page3 etc. It's is almost there but

I rather need the content to appear in the same page like there will be a text area in the same page where the content will appear. Can you help me out in this matter.

Note: - Like the link I gave u above for demo...there u saw that the page doesn't change. Only the image are changing in the same page. take a close look at the URL.

 

Ah, okay. Then you have two options, css or iframes.

You can create an iframe which you can pull the source of each page into, like this:
(this goes in the head tags, replacing the previous javascript code)

<script language="JavaScript">
    function goToPage($page){
        if($page != -1){
            window.frames["iframe-content"].src = $page;
        }
}
</script>

Code (markup):

this goes in your page where you want the content to appear:

<iframe name="iframe-content" id="iframe-content">
</iframe>

Code (markup):

and your form should be exactly the same.

The other way to do it is with css, but this will mean you'll have to load all the content on the page to display different elements, which is probably not what you want. You can style the iframe in your css, or set height, width, etc directly in the tag.

 

OK irving, I got it. Currently I am going through iframe but how to merge the iframe with the drop down menu. Also can you just create a demo like create simpe drop down menu and associate them with the iframe. Also try to put some content in the iframe. Like click on 2 drop down menu and the content in the iframe too changes. I am really sorry to ask too much from you but I really need the code running. Thanks for sticking with me.

 

Okay, I'll create a sample page for you - give me about 5 minutes.

edit: server is being dumb, bear with me and eventually I'll manage to upload a a whole 3 pages... *sigh*

 

Okay, have a look at http://www.getdegreesonline.net/test/dropdown-iframe.html and let me know if that's the kind of thing you're after - it will start with no content, then pull content from the different pages.

 

Hi irving, this worked absolutely fine. Thanks for helping me out.

 

hi irving it was a great help for new coders

 

You're welcome folks - I'll move the code into this thread tomorrow so I can take the page down and keep it here in case it helps anyone else.

 

Hi everyone, sorry I forgot to do this. Life got in the way I'm adding the code now to make it easier for anyone who is looking for this solution:

<html> 
	<head> 
		<script language="JavaScript"> 
    function goToPage($page){
        if($page != '0'){
            document.getElementById("iframe-content").src = $page;
        }
}
</script> 
	</head> 
	<body> 
		<div style="width:800px; height:100px;background:#ffaaaa;"> 
			<form style="width:100px;height:100px;float:left;"> 
				<select name="subject" onchange="goToPage(this.value);"> 
					<option value="0" selected="selected">Select a Page to View</option> 
					<option value="./page1.html">page1</option> 
					<option value="./page2.html">page2</option> 
				</select> 
			</form> 
			<iframe style="width:400px;height:40px;margin-left:110px;float:right;" src="" name="iframe-content" id="iframe-content" frameborder="0" scrolling="no"> 
			</iframe> 
		</div> 
	</body> 
</html>

Code (markup):