javascript - 使用两个下拉菜单的输入更改按钮上的链接？

Question

我有一个带有链接的按钮，需要根据用户从两个下拉菜单中选择的内容进行更改。

我在这里找到了这个出色的解决方案，其中包含一个下拉菜单:

var sel = document.getElementById('basic_plan');
sel.onchange = function () {
    document.getElementById("abc").href = this.value + ".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>

http://jsfiddle.net/MHh46/1/

但是我需要一个输出链接基于两个下拉菜单的解决方案。例如:

<div class="dropdown-plans">
    <select id="basic_plan" name="bill_cycle">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
<div class="dropdown-plans2">
    <select id="basic_plan2" name="bill_cycle2">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>

但是 Javascript 部分要如何才能使其工作呢？

例如，如果您从下拉列表 #1 中选择选项“1”并从下拉列表 #2 中选择选项“A”，则该按钮链接到 www.link1.com，如果您选择“2”和“A”，则该按钮链接到 www.link1.com。 link2.com、3A = www.link3.com、1B = www.link4.com 等

我希望我的问题有意义。

亲切的问候。 :-)

Answer 1

更改下拉菜单，使它们具有相同的类 (class="dropdown-plans")，然后您可以将更改事件绑定(bind)到两者。当选择其中一个时，事件将触发，并组合两个选择的值，然后将结果分配给 href。

JQuery

$('.dropdown-plans').change(function() {
    var val = $('#basic_plan').val() + $('#basic_plan2').val();
    $('#abc').prop('href',val);
});

JS Fiddle demo

更新

Here is an updated fiddle显示如何根据下拉列表中的选择来分配链接。使用这种方法，您将需要定义下拉列表可能的各种组合和应分配的相关链接之间的映射。我在演示中只展示了 2 种组合。