Question

我有非常基本的选择菜单。目前它使用开关功能。根据选择，我可以指定按钮的链接。这里的块是我如何有多个选择框，并至少基于选择器抓取链接并将其分配给按钮。

例如，在第一个选择框中，我将拥有：汽车，自行车，吉普车。根据例如“汽车”的选择，我想要第二个选择框来显示相关选项（宝马3，奥迪A4等）。关于改变车辆以显示相关的一个。例如“Bikes”显示“Honda，Apprilia”等。这是否可行[我目前的代码？

$(document).ready(function(e) {
  $('#basic_plan').change(function(e) {
    var an = $(this).val();
    switch (an) {

      case "ann":
        $('.button-plans a').attr('href', "www.google.com");
        break;
      case "bi":
        $('.button-plans a').attr('href', "www.yahoo.com");
        break;
      case "tri":
        $('.button-plans a').attr('href', "www.bing.com");
        break;
        /* and so on*/
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="dropdown-plans">
  <select id="basic_plan" name="bill_cycle">
    <option value="tri">Cars</option>
    <option value="bi">Bikes</option>
    <option value="ann">Jeeps</option>
  </select>
</div>
<div class="button-plans">
  <a id="abc" href="something"> Visit now </a>
</div>

Answer 1

我向新的class元素添加了select，以便默认隐藏它们（当change()触发时），然后根据您对{id的选择更改其可见性{1}}：

$(document).ready(function() {
  $('#basic_plan').change(function() {
    $('.second-select').hide();
    var an = $(this).val();
    switch (an) {
      case "ann":
        $('.button-plans a').attr('href', "www.google.com");
        $('#jeeps').show();
        break;
      case "bi":
        $('.button-plans a').attr('href', "www.yahoo.com");
        $('#bikes').show();
        break;
      case "tri":
        $('.button-plans a').attr('href', "www.bing.com");
        $('#cars').show();
        break;
        /* and so on */
    }
  });
});

第二个select元素：

$('.second-select').change(function() {
    var an = $(this).val();
    switch (an) {
      case "1":
        $('.button-plans a').attr('href', "www.example.com");
        break;
      case "2":
        $('.button-plans a').attr('href', "www.bitbucket.org");
        break;
      case "3":
        $('.button-plans a').attr('href', "www.facebook.com");
        break;
    }
  });
});

JsFiddle demo

注意：您从主播获得404的原因是JsFiddle会添加默认网址并将您的链接添加为URI。

Answer 2

你可以这样做：

$(document).ready(function(e) {
  $('#basic_plan').change(function() {
    $('.button-plans a').attr('href', $(this).find('option:selected').attr('data-url'));
  });
});

请参阅https://jsfiddle.net/6oemzgbo/

它的作品。

多个选择框和动态生成的链接

2 个答案: