javascript - 如何获取 "a"标签以根据多个下拉框的选择将用户引导至不同页面？

Question

我有以下代码来根据之前下拉框的选择填充下拉框:

$('#console').on('change', function() {
  $('#model').val('selectmodel');
  $('#model').change();
})
$('#model').on('change', function() {
  $('#repair').val('selectrepair');
  $('#repair').change();
})


ps4models               = new Array("PS4 (Release Model)", "PS4 Slim", "PS4 Pro");
xboxonemodels           = new Array("Xbox One (Release Model)", "Xbox One Slim", "Xbox One Scorpio");
ps3models               = new Array("PS3 (Release Model)", "PS3 Slim", "PS3 Super Slim");
xbox360models           = new Array("Xbox 360 (Release Model)", "Xbox 360 Slim", "Xbox 360 Super Slim");
wiimodels               = new Array("Wii", "Wii U");
othermodels             = new Array("Other");

ps4repairs              = new Array("test ps4",         "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
ps4slimrepairs          = new Array("test ps4 s",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
ps4prorepairs           = new Array("test ps4 p",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xboxonerepairs          = new Array("test xb1",         "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xboxoneslimrepairs      = new Array("test xb1 s",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xboxonescorpiorepairs   = new Array("test xbox1 sc",    "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
ps3repairs              = new Array("test ps3",         "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
ps3slimrepairs          = new Array("test ps3 s",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
ps3superslimrepairs     = new Array("test ps3 ss",      "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xbox360repairs          = new Array("test xb360",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xbox360slimrepairs      = new Array("test xb360 s",     "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
xbox360superslimrepairs = new Array("test xb360 ss",    "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
wiirepairs              = new Array("test wii",         "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
wiiurepairs             = new Array("test wiiu",        "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");
otherrepairs            = new Array("test other",       "HDMI port replacement", "Turns on then turns off", "Can't insert or eject disc");


populateSelectModel();

$(function() {

  $('#console').change(function() {
    populateSelectModel();
  });

});


function populateSelectModel() {

  console = $('#console').val();
  $('#model option[value!="selectmodel"]').remove();




  if (console == 'ps4') {
    ps4models.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

  if (console == 'xboxone') {
    xboxonemodels.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

  if (console == 'ps3') {
    ps3models.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

  if (console == 'xbox360') {
    xbox360models.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

  if (console == 'wii') {
    wiimodels.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

  if (console == 'other') {
    othermodels.forEach(function(t) {
      $('#model').append($('<option>').val(t).text(t));
    });
  }

}



populateSelectRepair();

$(function() {

  $('#model').change(function() {
    populateSelectRepair();
  });

});


function populateSelectRepair() {

  model = $('#model').val();
  $('#repair option[value!="selectrepair"]').remove();



  if (model == 'PS4 (Release Model)') {
    ps4repairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'PS4 Slim') {
    ps4slimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'PS4 Pro') {
    ps4prorepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox One (Release Model)') {
    xboxonerepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox One Slim') {
    xboxoneslimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox One Scorpio') {
    xboxonescorpiorepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'PS3 (Release Model)') {
    ps3repairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'PS3 Slim') {
    ps3slimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'PS3 Super Slim') {
    ps3superslimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox 360 (Release Model)') {
    xbox360repairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox 360 Slim') {
    xbox360slimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Xbox 360 Super Slim') {
    xbox360superslimrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Wii') {
    wiirepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Wii U') {
    wiiurepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }

  if (model == 'Other') {
    otherrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t).text(t));
    });
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="console">
  <option value="selectconsole">Select My Console</option>
  <option value="ps4">PS4</option>
  <option value="xboxone">Xbox One</option>
  <option value="ps3">PS3</option>
  <option value="xbox360">Xbox 360</option>
  <option value="wii">Wii and Wii U</option>
  <option value="other">Other</option>
</select>
<select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="model">
  <option value="selectmodel">Select My Model</option>
</select>
<select data-minimum-results-for-search="Infinity" class="form-control select-filter" id="repair">
  <option value="selectrepair">Select My Repair</option>
</select>
<a href="">Get My Quote</a>

我希望下拉框后面的链接标记能够根据第二个和第三个下拉框中的选择转到不同的页面。最好的方法是什么？

编辑:

抱歉，我应该提到我无法编辑当前的网址结构，因为我不想弄乱我的入站链接。所以我只计划为每个组合编写一行代码。显然不是最佳的，但只要它有效。例如

如果型号是“ps4 slim”并且修复是“hdmi replacement”，请转到 xxxxx .htm

如果型号是“ps3”并且修复是“ylod”，则转到 xxxxx .htm

Answer 1

这是我的做法:

otherrepairs = [
  ["www.a.com", "test other"],
  ["b.com", "HDMI port replacement"],
  ["c.com", "Turns on then turns off"],
  ["d.com", "Can't insert or eject disc"]
];

if (model == 'Other') {
    otherrepairs.forEach(function(t) {
      $('#repair').append($('<option>').val(t[0]).text(t[1]));
    });
  }

同时更新:

$(".browse").click(function() {
  window.location = $("#repair").val();
});

Here is the JSFiddle demo

上面是我如何构造数组以容纳链接。

为了演示，我仅将新结构应用于“其他”选项。您将需要复制其余代码。

我在链接和最后一个下拉列表中添加了一个类，以便我可以通过 JQuery 引用它们并重定向到所需的页面。