选中后如何制作2个下拉菜单选项链接到网站页面

Question

希望有人可以帮助我做些什么。 我在测试页上拥有的代码http://glysomed.bydecosta.com/test1.php

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

一旦用户单击，例如：我是：下拉菜单1中的“有人用我的手工作”，而我需要：下拉菜单2中的“紫外线防护”。一旦用户单击Go，则需要将用户带到以下页面： http：/ /glysomed.bydecosta.com/portfolio-item/hand-cream-frag-free/

或：用户单击以下内容后：例如：我是：下拉菜单1中的“有人用我的脚工作”，而我需要：下拉菜单2中的“皮肤救济”。用户单击“转到”后，需要将用户带到页面： 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;
    });
});

Answer 2

我认为解决此问题的最简单方法是创建一个二维数组，在其中保存您想要将人们重定向到的路径：

var link = [
    []
];
link[1] = [];
link[2] = [];
link[3] = [];

然后根据select1和select2选项的值将所需路径的字符串应用于2D数组

link[1][1] = "hand-cream-frag-free";
link[2][7] = "foot-balm";
/* ... and so on*/

最后，在变量url只需将域字符串与2D数组中此位置的字符串连接即可。 还可以将javascript中的ID固定为“ #select1 ”和“ #select2 ”，因为这些是您在html中使用的ID。 另外，我还修正了一个错字，您使用window.location.ref而不是window.location.href ：

$(".go-btn").click(function () {
    // Grab text from select boxes
    var firstSelection = $("#select1").val();
    var secondSelection = $("#select2").val();

    // Set URL, change as necessary
    var url = "http://glysomed.bydecosta.com/portfolio-item/" + link[firstSelection][secondSelection] + "/";

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

工作的JSFiddle ： http : //jsfiddle.net/northkildonan/6Lrzgffs/1/