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」に変更する必要があります

アップデート：

2つのことを調べました。1) javascript を使用して href を変更し、2) select タグに 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

このタスクには jQuery を使用できます。

作業コード:

<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 に答える