How to change href link of button used with dropdown menu?

Question

I am trying to create drop down menu with a button.

My code is -

<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>
</select>
</div>

<div class="button-plans">
<a href="somelink"> Order now </a>
</div>

Depending on what option i select from dropdown, the href value "somelink" should change. For instance if i select 1 year. href value should change from "somelink" to "google.com"

Update:

I searched two things. 1) Changing href using javascript and 2) using onchange for select tag. It lead me to create this following piece of code.

<script>

function getOpt(period) {

    if (period.value = "tri") { document.getElementById("abc").href="tri.html"; }
    else if (period.value = "bi") { document.getElementById("abc").href="bi.html"; }
    else { document.getElementById("abc").href="ann.html"; } 
 }

</script>

<div class="dropdown-plans">

<select id="basic_plan" name="bill_cycle" onchange="getOpt(this)">

<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>

</select>

</div>

<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>

Problem: The drop down shows 3 years by default. But if i select 2 years, it still remains 3 years.

http://stackoverflow.com/questions/12287672/links-in-select-dropdown-options post of kevin worked for me — Bikram Shrestha, Feb 12 '14 at 07:22

Sergio · Accepted Answer · 2013-10-06T19:18:43.650

2

Try this to change the href to the value of the selected option:

HTML

<div class="dropdown-plans">
    <select id="basic_plan" name="bill_cycle">
        <option value="tri">3 Years - Rs. 100/month</option>
        <option value="bi">2 Years - Rs. 200/month</option>
        <option value="ann">1 Year - Rs. 100/month</option>
    </select>
</div>
<div class="button-plans">
    <a id="abc" href="something"> Order now </a>
</div>

Javascript

var sel = document.getElementById('basic_plan');
sel.onchange = function () {
    document.getElementById("abc").href = this.value + ".html";
}

Demo here

edited Oct 06 '13 at 19:18

answered Oct 06 '13 at 18:24

Sergio

28,539
11
85
132

Yep that works fine. Thank you. However check my post for updated code. And see if you can answer my doubt. – lastman93 Oct 06 '13 at 19:01
@Codestor when you use `=` you are telling the select to have that value, so you are always in the first if. You should use `==` to compare values – Sergio Oct 06 '13 at 19:16
@Codestor, I updated my answer with corrections and optimization to your code, please don't use inline script like `onchange="getOpt(this)"` – Sergio Oct 06 '13 at 19:19
Thank you. I learned so many things. This was my first post on stack overflow and I am happy with the quick response. I was using if else to select tri, bi, ann dot html. However you used a concat + operator. That was clever. Also document.querySelector. I am eager to learn more about it now. – lastman93 Oct 06 '13 at 19:30
@Codestor, happy I could help. Enjoy SO! – Sergio Oct 06 '13 at 19:32
Oh okay. I got it. Script should boot up after every HTML element is rendered. :) – lastman93 Oct 06 '13 at 19:39
1

Just a small correction. If i am using the script before html then window.onload works instead of window.load. :) – lastman93 Oct 06 '13 at 19:50
1

Simple and quick solution. Thanks a lot. – anil shrestha Jun 11 '20 at 09:44

Sunil Kumar · Answer 2 · 2013-10-06T18:37:12.800

You can use jQuery for this task.

Working code:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#basic_plan').change(function(e) {
    var an = $(this).val();
    switch(an){         

case "ann": $('.button-plans a').attr('href',"google.com"); break;
case "bi": $('.button-plans a').attr('href',"yahoo.com"); break;
case "tri": $('.button-plans a').attr('href',"bing.com"); break;
            /* and so on*/
        }
});
});
</script>
</head>
<body>
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>
</select>
</div>

<div class="button-plans">
<a href="somelink"> Order now </a>
</div>
</body>
</html>

No jQuery tagged in this question... maybe good to name that this answer has jQuery somewhere in your answer. — Sergio, Oct 06 '13 at 18:32
The code definitely works. Thank you. However i would surely love to learn more about my doubt in this post. Check my updated post. And thanks again. — lastman93, Oct 06 '13 at 18:59

score -1 · Answer 3 · edited Oct 06 '13 at 18:46

Use javascript code to change the href attribute. The javascript function should be called on onChange eventof select list and the function will change the href of the link according to the selected option.

Code:

<select onchange="jsFunction()" id="dd">
....

</select>



function jsFunction(){

var e = document.getElementById("dd");
var strUser = e.options[e.selectedIndex].value;

// on the basiss of value of strUser change the href value
    document.getElementById("abc").href="xyz.php"; 


}

How to change href link of button used with dropdown menu?

3 Answers3

Demo here