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>

示例：

西部+冬季访问google.com

东部+春季到facebook.com

Answer 1

您可以使用javascript开关。编辑

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

<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

    }

};

Answer 2

您需要在function(e)内添加条件，如果选定的选项与您的模式匹配，则将在其中添加条件，然后打开相关链接。

此处的JSFIDDLE工作示例：http://jsfiddle.net/vkt26hn1/

下面是您的函数的完整代码：

 (function() {
      $(".go-btn").on(
        'click',
        function(e) {

          let match1 = "west + winter";
          let match2 = "east + spring";

          let value = $('#select1 option:selected').text() + " + " + $('#select2 option:selected').text()

          let url = "";
          if (value.toLowerCase() === match1) {
            url = "http://google.com";
          } else if (value.toLowerCase() === match2) {
            url = "http://facebook.com";

          }
          window.open(url, '_blank');
        });

    }());

Answer 3

您可以创建一个obj来保存您的组合并指向URL。然后，您将获得所选值，进行连接并检查是否为有效组合。这样，您只需要在代码需要更改时更新urls。

(function() {
  var $sel1 = $('#select1');
  var $sel2 = $('#select2');
  var urls = {
    "1-1": "http://www.google.com",
    "1-2": "http://www.google.com",
    "1-3": "http://www.facebook.com",
    "1-4": "http://www.facebook.com"
    // "2-1", "2-2"... and go on
  };
  $(".go-btn").on(
    'click',
    function(e) {
      var key = $sel1.val() + '-' + $sel2.val();
      var value = urls[key] || 'Default value';
      $('#selected').html(`urls[${key}] = ${value}`);
    });
}());

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

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

3 个答案: