Solved

Dropdown option label used as dynamic link and text.

Posted on 2010-09-16
10
309 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

710 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