1

我正在尝试使用按钮创建下拉菜单。

我的代码是 -

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

根据我从下拉列表中选择的选项，href 值“somelink”应该改变。例如，如果我选择 1 年。href 值应从“somelink”更改为“google.com”

更新：

我搜索了两件事。1) 使用 javascript 更改 href 和 2) 使用 onchange 选择标签。它引导我创建以下这段代码。

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

问题：下拉菜单默认显示 3 年。但是如果我选择 2 年，它仍然是 3 年。

4

3 回答 3

2

试试这个来改变href所选选项的值：

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

演示在这里

于 2013-10-06T18:24:34.207 回答
1

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>
于 2013-10-06T18:31:44.103 回答
-1

使用 javascript 代码更改 href 属性。javascript函数应在选择列表的onChange事件上调用，该函数将根据所选选项更改链接的href。

代码：

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


}
于 2013-10-06T18:34:56.327 回答