Solved

Dropdown option label used as dynamic link and text.

Posted on 2010-09-16
10
307 Views
Last Modified: 2012-05-10
I have a dropdown menu (code below).  I have a span of text that I need to reflect the LABEL (not value) of the currently selected option in the dropdown "fbContentsMenu".  So if the user selected the second option, the span of text would change to 'D Home - Mar-Apr 2010'

I also have a hyperlink to the right of this span that reads "Click here to learn more." This hyperlink also needs to reflect the LABEL of the same dropdown, but with the spaces replaced with + to be URL safe.  Again, if the second option is selected in the dropdown, then the hyperlink code would read:

<a href="project-detail.php?name=D+Home+-+Mar-Apr+2010">Click here to learn more.</a>

Any ideas on how this can be accomplished?  Thanks!
<select id="fbContentsMenu" name="fbContentsMenu">
<option value="2">D Home - May-Jun 2010</option>
<option value="4">D Home - Mar-Apr 2010</option>
<option value="6">D Home - Mar-Apr 2009</option>
</select>

Open in new window

0
Comment
Question by:James_Avery
  • 6
  • 4
10 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33696277
0
 

Author Comment

by:James_Avery
ID: 33696517
Cool, thanks.  Any idea on how to pull off the rest of my question?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33696905
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	function reflectMyChoice(s) {
		var text = s.options[s.selectedIndex].text;
		document.getElementById("myAnchor").setAttribute("href", "project-detail.php?name=" + encodeURI(text));
		document.getElementById("myAnchor").innerHTML = text;
		document.getElementById("mySpan").innerHTML = text;
	}
</script>
</head>

<body onload="reflectMyChoice(document.getElementById('fbContentsMenu'))">

<select id="fbContentsMenu" name="fbContentsMenu" onchange="reflectMyChoice(this);">
<option value="2">D Home - May-Jun 2010</option>
<option value="4">D Home - Mar-Apr 2010</option>
<option value="6">D Home - Mar-Apr 2009</option>
</select>

<br /><br /><br /><br /><br />

Span :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="mySpan"></span>

<br />

Anchor :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="myAnchor" href=""></a>

</body>
</html>

Open in new window

0
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

Author Comment

by:James_Avery
ID: 33704626
Wow. This is exactly what I was looking for.  Thanks!  

One problem: It looks like the URL that is generated still contains spaces rather than + or %.

What can I do to correct this?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33706495
>One problem: It looks like the URL that is generated still contains spaces rather than + or %.

sure ? click on it.

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33706503
if you want to replace space by %20 use : myString.replace(/\s/g,"%20")
or by + : myString..replace(/\s/g,"+")

but again in you case it's not needed
0
 

Author Comment

by:James_Avery
ID: 33716866
Thanks a lot!  Below is a link to the page I am currently working with.  The function appears to be working correctly, but for some reason it doesn't turn the 'myAnchor' span into a link.  It may be clashing with some of the more advanced javascript I have running on the page, but I am not sure.  

http://www.drawninwardmedia.com/cantoni/studioNEW.php

Is there an alternate way to create a hyperlink out of the 'myAnchor' span that we could try?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33716911
Initially in your question you have an anchor. Why do you propose an span now ?
<span id="myAnchor" href="project-detail.php?name=D%20Home%20-%20Mar-Apr%202010">D Home - Mar-Apr 2010</span>

instead :

<a id="myAnchor" href="project-detail.php?name=D%20Home%20-%20Mar-Apr%202010">D Home - Mar-Apr 2010</a>

Open in new window

0
 

Author Comment

by:James_Avery
ID: 33716988
Wow. Thank you so much for you help.  Everything seems to be working as intended.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33717045
You're welcome! Thanks for the points!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
insert text field data into html script 13 42
Input box width 6 27
Can't find PHP files on account that has WordPress 3 27
innerHTML 7 20
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question