Question

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

我在这里找到了这个精彩的解决方案，其中包含一个下拉菜单：

＆＃13;

var sel = document.getElementById('basic_plan');
sel.onchange = function () {
    document.getElementById("abc").href = this.value + ".html";
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

例如，如果您选择选项＆＃34; 1＆＃34;从下拉列表＃1和选项＆＃34; A＆＃34;从下拉列表＃2按钮链接到www.link1.com，如果您选择＆＃34; 2＆＃34;和＆＃34; A＆＃34;它链接到www.link2.com，3A = www.link3.com，1B = www.link4.com等。

我希望我的问题有道理。

亲切的问候。： - ）

Answer 1

var sel = document.getElementById('basic_plan');
var sel2 = document.getElementById('basic_plan2');
if(sel.value){
sel2.onchange = function () {
    document.getElementById("abc").href = sel.value+""+this.value + ".html";
}}

此部分仅在设置了第一个选择时有效。希望这可以帮助。

Answer 2

更改下拉菜单，使它们都具有相同的类（class =＆＃34; dropdown-plans＆＃34;）然后您可以将更改事件与两者联系起来。选择其中任何一个时，事件将触发，并组合两个选择的值，然后将结果分配给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显示如何根据下拉列表中的选择来分配链接。使用此方法，您需要使用下拉列表和应分配的相关链接定义可能的各种组合之间的映射。我在演示中只展示了两种组合。

Answer 3

注册一个事件处理程序，处理两个下拉列表中任何一个的更改并获取所选选项的值。

var sel = document.getElementById('basic_plan1');
var sel2 = document.getElementById('basic_plan2');

sel.onchange = dropdownChange;
sel2.onchange = dropdownChange;

function dropdownChange() {
    var fd = document.getElementById("basic_plan1");
    var sd = document.getElementById("basic_plan2");

    var firstValue = fd.options[fd.selectedIndex].value;
    var secondValue = sd.options[sd.selectedIndex].value;

    document.getElementById("abc").href = firstValue + secondValue + ".html";
}

请参阅此JSFiddle。

Answer 4

您可以为两个选择添加更改事件，并在任何更改后构建网址

  var basic_plan = document.getElementById("basic_plan");
    var basic_plan2 = document.getElementById("basic_plan2");
    function changeUrl() {
      document.getElementById("def").innerHTML = "www.site.com/" + basic_plan.value + basic_plan2.value;
    }

<div class="dropdown-plans">
    <select id="basic_plan" name="bill_cycle" onchange="changeUrl()">
        <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="dropdown-plans2">
<select id="basic_plan2" name="bill_cycle2" onchange="changeUrl()">
    <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>
   <br/>
   <span id="def"></span>
</div>

Answer 5

您可以在下面看到我的代码或link以供参考：

＆＃13;

function GotoLink() {
  var sel = $('.basic_plan option:selected').text();
  var sel2 = $('.basic_plan2 option:selected').text();
  alert('www.site.com/' + sel + '' + sel2 + '');
  document.getElementById("abc").href = 'www.site.com/' + sel + '' + sel2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dropdown-plans">
  <select id="basic_plan" class="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" class="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="#" onclick='GotoLink()'> Order now </a>
</div>

＆＃13;

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

5 个答案: