javascript - 如何在选中指向网站页面的链接后制作 2 个下拉选项

Question

希望有人可以帮助我做的事情。这里的代码我在我的测试页面上有它http://glysomed.bydecosta.com/test1.php

我需要能够执行以下操作:

一旦用户点击例如:我是:Dropdown 1 中的“用我的双手工作的人”我需要:下拉菜单 2 中的“防紫外线”一旦用户点击 Go，它需要将用户带到一个页面: http://glysomed.bydecosta.com/portfolio-item/hand-cream-frag-free/

或者:一旦用户点击例如:我是:下拉列表 1 中的“用脚工作的人”我需要:下拉菜单 2 中的“Skin Relief”一旦用户点击 Go，它需要将用户带到一个页面: http://glysomed.bydecosta.com/portfolio-item/foot-balm/

希望有人能帮忙。

谢谢，马塞洛

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        // Grab text from select boxes
        var firstSelection = $( "#selection1 option:selected" ).text();
        var secondSelection = $( "#selection2 option:selected" ).text();

        // Set URL, change as necessary
        var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;

        // Redirect
        window.location.href = url;
    });
});

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

<div class="selCont">
  
  <h2>Me Time</h2>

I Am:
  <select id="select1">
  	<option value=" " selected="selected">- Select -</option>
    <option value="1">Someone who works with my hands</option>
    <option value="2">Someone who works wit my feet</option>
    <option value="3">Someone who works with my body</option>
  </select>

and I need:
  <select id="select2">
    <option value=" " selected="selected">- Select -</option>
    <option value="1">UV Protection</option>
    <option value="2">Acne</option>
    <option value="3">Dry Skin</option>
    <option value="4">Eczema</option>
    <option value="5">Itchy Relief</option>
    <option value="6">Redness</option>
    <option value="7">Sensitive Skin</option>
  </select>

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

Answer 1

选择器中的 id 或标记将需要更新以在下面的代码顶部相互匹配。我假设您将要构建多个 url 组合，因此您可以在下面添加额外的 case 语句来处理所需的任何一个:

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        var firstSelection = $( "#selection1 option:selected" ).val();
        var firstPart;
        switch(firstSelection) {
            case '1':
            case '2':
             firstPart = 'portfolio-item';
             break;
            default:
             firstPart = '';
             break;
        }

        var secondSelection = $( "#selection2 option:selected" ).val();
        var secondPart;
        switch(secondSelection) {
            case '1':    
             secondPart = 'hand-cream-frag-free';
             break;
            case '2':
             secondPart = 'foot-balm';
             break;
            default:
             secondPart = '';
             break;
        }

        var url = "http://glysomed.bydecosta.com/" + firstPart + "/" + secondPart;

        // Redirect
        window.location.href = url;
    });
});