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

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"

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.

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

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.

Share Improve this question edited Oct 6, 2013 at 18:58 asked Oct 6, 2013 at 18:20 lastman93 2113 gold badges5 silver badges19 bronze badges

I have tried something, check the updated post. :) – lastman93 Commented Oct 6, 2013 at 18:58
stackoverflow./questions/12287672/… post of kevin worked for me – Bikram Shrestha Commented Feb 12, 2014 at 7:22

Add a ment |

3 Answers 3

Sorted by: Reset to default 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

You can use jQuery for this task.

Working code:

<html>
<head>
<script src="//ajax.googleapis./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."); break;
case "bi": $('.button-plans a').attr('href',"yahoo."); break;
case "tri": $('.button-plans a').attr('href',"bing."); 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>

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


}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change href link of button used with dropdown menu? - Stack Overflow

3 Answers 3

Demo here

与本文相关的文章

评论列表(0)