Solved

append dropdown value to hyperlink with jquery

Posted on 2013-05-21
8
379 Views
Last Modified: 2013-05-22
say i have a drop down and hyperlink

<select id="attribute_input_27" name="oa_attributes[27]" onchange="calcAttrPrice()">
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>

<a href="contact/?attribute=xxx">click here</a>

want people click the hyper link the link will goto attribute=p1 / p2 or p3 base on value, how? please help expert!
0
Comment
Question by:john80988
  • 4
  • 2
  • 2
8 Comments
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 39186527
<select id="attribute_input_27" name="oa_attributes[27]" onchange="calcAttrPrice()">
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>

<a id="someid" href="contact/?attribute=xxx">click here</a>

var parameter=$("#attribute_input_27").value;
$("#someid").attr("href", "contact/?attribute="+parameter);

Refer

 http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery

http://stackoverflow.com/questions/1334083/how-to-change-href-attribute-of-a-link-using-jquery
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186560
I think you are looking for this:
<select id="attribute_input_27" name="oa_attributes[27]">
<option value="" selected disabled>Select</option>
<option value="p1">p1</option>
<option value="p2">p2</option>
<option value="p3">p3</option>
</select>
<script>
    $(function(){
      // bind change event to select
      $('#attribute_input_27').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
             $('#someid').attr('href','contact/?attribute='+ url);
          }
          return false;
      });
    });
</script>
<a id="someid" href="#">click here</a>

Open in new window


Add jquery source
0
 

Author Comment

by:john80988
ID: 39186643
Yes this is want i need, can it also initial select the first time loaded value? Please help master expert. TQ
0
 

Author Comment

by:john80988
ID: 39186652
I mean when page loaded before i click the dropdown, can it initial append the selected value for the first time.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 12

Accepted Solution

by:
sivagnanam chandrakanth earned 500 total points
ID: 39186666
Yes, you can just put below lines

 $(function(){

//for default value
var parameter=$("#attribute_input_27").value;
$("#someid").attr("href", "contact/?attribute="+parameter);

//onchange code has to go here
0
 

Author Comment

by:john80988
ID: 39186726
it should work, but it give me http://someurl.com/contact/?attribute=undefined

i think when teh time it get the value , the dropdown still haven't fill in the dropdown value from db

it it possible to initial the value after all the thing load?
0
 

Author Closing Comment

by:john80988
ID: 39186825
yea add selectedindex=0;
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186882
Find the selected element using:
$("#elementid option").index($("#elementid option:selected")))

Open in new window


And now add selected attribute:
$("#elementid").val("value").attr("selected","selected")

Open in new window

0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS Divs in Safari 3 19
Adding through query php 9 11
two tables one button 11 19
Asp.net mvc foreach 3 6
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now