Show Dropdown box on click of link

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
I am adding a country drop down box on a page which will be visible when click on Country link...otherwise that will be hidden. Please tell me how to do this...may be some javascript...because right now i have to load another page to make visible. Please help...
 
Joined
Dec 22, 2004
Messages
721
You can put a drop down box onto a page using html with something like this.


Code:
<table>
  <tr>
    <td width="300"><select name="billing_country">
          <option selected>Country</option>
          <option value="AF">Afghanistan</option>
          <option value="AL">Albania</option>
          <option value="DZ">Algeria</option>
          <option value="AS">American Samoa</option>
          <option value="AD">Andorra</option>
          <option value="AO">Angola</option>
          <option value="AI">Anguilla</option>
    </td>
  </tr>
<table>
Is this what you are looking for?
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
No i am not looking this...I already given above code on my page....but I want this drop down box is only visible when clicking the Country hyperlink, otherwise not visible. And also for showing the dropdown box...no other page loaded...visible in same page. Hope you understand...my point.
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
Friend this is not close what i want. I dont need a popup window, i asked to visible the dropdown menu on a page by just clicking the hyperlink.
 
Joined
Aug 7, 2005
Messages
2,183
At the end of the page you have this:

HTML:
<!-- ... do not change the line below ... -->
<!-- you can also copy this block (look for the next ******) and duplicate it ABOVE the text you're hiding... that way people don't have to scroll to "close" the block -->
<a href="#" onClick="showMoreAnything(101,0);return false;">
<!-- ... do not change the line above ... -->
<!-- .... do not change the lines below ... -->
</a><br />
<!-- ******* if duplicating copy to here and copy and paste above the text you're hiding to allow for another link to close the block -->
You need this

HTML:
<!-- ... do not change the line below ... -->
<!-- you can also copy this block (look for the next ******) and duplicate it ABOVE the text you're hiding... that way people don't have to scroll to "close" the block -->
<a href="#" onClick="showMoreAnything(101,0);return false;">
<!-- ... do not change the line above ... -->
Hide Country
<!-- .... do not change the lines below ... -->
</a><br />
<!-- ******* if duplicating copy to here and copy and paste above the text you're hiding to allow for another link to close the block -->
 

ashras99

Thread Starter
Joined
Jul 13, 2002
Messages
1,044
I dont want to show the text anywhere else, I want the text comes at the same place where previouss one hyperlink is coming. I dont think above change will do this.
 
Joined
Jul 29, 2001
Messages
21,334
The code is right in the page if you want to creatively "borrow" it and sue it as your own. All it is doing is showing and hiding divs with the onClick event.
 
Joined
Aug 7, 2005
Messages
2,183
ashras99 said:
I dont want to show the text anywhere else, I want the text comes at the same place where previouss one hyperlink is coming. I dont think above change will do this.
You are right. Sorry. :eek:
 
Joined
Jan 4, 2006
Messages
112
All those solutions look pretty complicated. If I understand your question correctly, will a simple script similar to this do the trick?

HTML:
<html>
<script type="text/javascript">
function toggle(elId)
{
	var state = document.getElementById(elId).style.visibility;
	if( state == "hidden")
		document.getElementById(elId).style.visibility = "visible";
	else
		document.getElementById(elId).style.visibility = "hidden";
}
</script>
<body>
<form>
<select id="ddbox" name="ddbox" style="visibility:hidden;">
	<option>one</option>
	<option>two</option>
	<option>three</option>
</select>
<a href="#" onclick="toggle('ddbox'); return false;">show/hide</a>
</form>
</body>
</html>
A couple of points to this: it's got to have the inline style. You can also change from "visibility" to "display" and it will readjust the page instead of leaving the big white space for it. "display" has "block" and "none" instead of "hidden & visibile"
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Top