javascript - 将 HTML 链接到下拉列表的组合

Question

我编写了一个代码来从两个下拉菜单中获取值，现在我想通过组合下拉菜单导航到不同的 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>

示例:

west + winter to google.com

east + spring to facebook.com

Answer 1

您可以使用 javascript 开关。 已编辑

首先，我将按钮上的 onClick 事件更改为 onClick。 我使用 Dreamweaver 预览在 Safari 中对其进行了测试。

---

<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" onClick="run()" type="submit">Go</button>

---

然后我发出警报以检查发生了什么。之后删除它。

---

function run(){
var value1 = $('#select1 option:selected').text();
var value2 = $('#select2 option:selected').text();
var valuecombo = value1 + "/" + value2;

switch (valuecombo) {
        default:
       //in case no matches are found this is what should happen. Could be an alert
//WINTER
    case 'West/Winter':

        alert("West/Winter will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'East/Winter':

        alert("East/Winter will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'North/Winter':

        alert("North/Winter will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'South/Winter':

        alert("South/Winter will push you to google.com");
       window.location.href = 'http://www.google.com';
        break;

//SPRING
    case 'West/Spring':

        alert("West/Spring will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'East/Spring':
        alert("East/Spring will push you to facebook.com");
       window.location.href = 'http://www.facebook.com';
       break;

    case 'North/Spring':

        alert("North/Spring will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'South/Spring':

        alert("South/Spring will push you to google.com");
       window.location.href = 'http://www.google.com';
        break;

//SUMMER
    case 'West/Summer':

        alert("West/Summer will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'East/Summer':

        alert("East/Summer will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'North/Summer':

        alert("North/Summer will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'South/Summer':

        alert("South/Summer will push you to google.com");
       window.location.href = 'http://www.google.com';
        break;

//FALL
    case 'West/Fall':

        alert("West/Fall will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'East/Fall':

        alert("East/Fall will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'North/Fall':

        alert("North/Fall will push you to google.com");
       window.location.href = 'http://www.google.com';
       break;

    case 'South/Fall':

        alert("South/Fall will push you to google.com");
       window.location.href = 'http://www.google.com';
        break;

//everything else

    }

};