Dropdown option label used as dynamic link and text.

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

James_AveryAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
0
 
James_AveryAuthor Commented:
Cool, thanks.  Any idea on how to pull off the rest of my question?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
James_AveryAuthor Commented:
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
 
leakim971PluritechnicianCommented:
>One problem: It looks like the URL that is generated still contains spaces rather than + or %.

sure ? click on it.

0
 
leakim971PluritechnicianCommented:
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
 
James_AveryAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
James_AveryAuthor Commented:
Wow. Thank you so much for you help.  Everything seems to be working as intended.
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0
All Courses

From novice to tech pro — start learning today.