Solved

Dropdown option label used as dynamic link and text.

Posted on 2010-09-16
10
310 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

617 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