Question

我有2个下拉列表，我需要根据不同的值组合更改url按钮。

即。第一个下拉菜单：蓝色，红色，黄色第二个下拉菜单：汽车，球，房子

如果用户选择蓝色和球形，则按钮网址将更改为www.blueball.com 如果用户选择“蓝色和房屋”，则按钮URL更改为www.bluehouse.com。 ...

这是我能做的最接近的事情，但我不需要显示文本，而是需要它链接到不同的URL。

(function () {

  $(".go-btn").on(
    'click', 
     function (e) {
       // within this function you should figure out the url
       // to redirect to, depending on the selected values
       // the next line only shows the text of selected values
       $('#selected').html([$('#select1 option:selected').text(), 
                            $('#select2 option:selected').text()].join('/'));
  });

}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="selCont">

  <h2>pick an option</h2>

  <select id="select1">
    <option value="1" selected>West</option>
    <option value="2">East</option>
    <option value="3">North</option>
    <option value="4">South</option>
  </select>

  <select id="select2">
    <option value="1" selected>Winter</option>
    <option value="2">Spring</option>
    <option value="3">Summer</option>
    <option value="4">Fall</option>
  </select>

  <button class="go-btn" type="submit">Go</button>

</div>
<div id="selected"></div>

正在使用JSfiddle https://jsfiddle.net/td3j5frn/

这是我在网上找到的另一个例子，看起来不错，但按钮未正确链接。

    function myFunction() {

$('.dropdown-plans').change(function() {
    var val = $('#basic_plan').val() + $('#basic_plan2').val();
    var linknum = "";
    switch (val) {
        case "1A" : linknum = "1";
            break;
        case "1B" : linknum = "4";
            break;
    }
    $('#abc').attr("href","www.link" + linknum + ".com");
});

      }

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

正在使用JSfiddle https://jsfiddle.net/errypkpc/1/

按钮的网址根据2个下拉选择组合进行更改

0 个答案: