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

1
votes

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.

3
javascripthtmlhtml-select
I have tried something, check the updated post. :) - lastman93
stackoverflow.com/questions/12287672/… post of kevin worked for me - Bikram Shrestha

3 Answers

2
votes

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

1
votes

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>
-1
votes

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"; 


}