[jQuery] Change link dependant on select box.
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-GB link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hello Guys,<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I’m looking for some help on getting started with a
script that’ll change the href attribute of a link dependant on the
option selected in a select box. To add a little ‘spice’ the challenge
the value of the href must be determined from a set of key value pairs. Let me
try and offer an example.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I have a select box like this:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'><select</span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>name=</span><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"customer"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>id=</span><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"customer"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>></span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'><option</span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>value=</span><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"1"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>></span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>Joe Bloggs</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'></option></span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'><option</span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>value=</span><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"2"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'>></span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>Dave Something</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#C38800'></option></span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:#C38800'></select><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:#C38800'><o:p> </o:p></span>
<p class=MsoNormal>And the link which I want to change dependant on the
selection looks something like this:<o:p></o:p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New"'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'><a</span><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'>href=</span><span style='font-size:10.0pt;
font-family:"Courier New";color:blue'>"/view_customer_company.cfm?company_id=</span><b><span
style='font-size:10.0pt;font-family:"Courier New";color:red'>6</span></b><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:navy'>></span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>View </span><b><span
style='font-size:10.0pt;font-family:"Courier New";color:red'>Customers</span></b><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> Company</span><span
style='font-size:10.0pt;font-family:"Courier New";color:navy'></a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:navy'><o:p> </o:p></span>
<p class=MsoNormal>I’ve highlighted the bits in red which I wish to make
dynamic dependant on the option chosen in the select box. Where I’ve put ‘<span
style='color:red'>customers</span>’ I want to dynamically change to the option
text, such as ‘Joe Bloggs’ or ‘Dave Something’ and the
company_id value I need to pull from a key/value set using the option value as
the key, such as 1 or 2. The key/value pairs look something like this:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Key:value<o:p></o:p>
<p class=MsoNormal>1: 50ccdae0-79bf-11dd-ad8b-0800200c9a66<o:p></o:p>
<p class=MsoNormal>2: 9c335820-d878-4db3-b90a-728046cb8849<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>So, as a quick summation of the expected results, If I
select ‘Joe Bloggs’ in my select list, I want the link to be
changed to:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'><a</span><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'>href=</span><span style='font-size:10.0pt;
font-family:"Courier New";color:blue'>"/view_customer_company.cfm?company_id=</span>50ccdae0-79bf-11dd-ad8b-0800200c9a66<span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:navy'>></span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>View </span>Joe
Bloggs<span style='font-size:10.0pt;font-family:"Courier New";color:black'>
Company</span><span style='font-size:10.0pt;font-family:"Courier New";
color:navy'></a><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:navy'><o:p> </o:p></span>
<p class=MsoNormal>And likewise, if I chose ‘Dave Something’ in the
select list the link would look like this:<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'><a</span><span style='font-size:10.0pt;
font-family:"Courier New";color:black'> </span><span style='font-size:10.0pt;
font-family:"Courier New";color:navy'>href=</span><span style='font-size:10.0pt;
font-family:"Courier New";color:blue'>"/view_customer_company.cfm?company_id=</span>9c335820-d878-4db3-b90a-728046cb8849<span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>"</span><span
style='font-size:10.0pt;font-family:"Courier New";color:navy'>></span><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>View Dave
Something Company</span><span style='font-size:10.0pt;font-family:"Courier New";
color:navy'></a><o:p></o:p></span>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I’m really a novice with both JavaScript and jQuery
for the moment, I’m learning well but this is a little bit beyond me, especially
when you’re looking at working with the key/value paris.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I appreciate any help you can offer and thanks in advance for
your time.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Robert<o:p></o:p>
</div>
</body>
</html>