javascript - 如何使用提交按钮添加多个下拉表单组合值并转到 url

Question

我希望提交按钮作用于表单中两个不同下拉菜单中的组合值。

例如...west 和 winter 与 west 和 summer 是不同的 URL

为了完成这项工作，我苦苦挣扎了好几天。我觉得这怎么可能。请帮忙!

这是我使用的代码。当我将值替换为 URL 时。该 URL 将在提交 (go) 时加载。我希望计算第一个下拉菜单和第二个下拉菜单的值，结果应该是提交时的 URL。最后应该有 16 个不同的 URL。

$(document).ready(function () {
$(".go-btn").click(function () {
location = $("#selection option:selected").val();
});
});

<div class="selCont">
<h2>pick an option</h2>

<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>

<select id="selection" name="selection">
<option value="1">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>

Answer 1

试试这段代码:

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;
    });
});

此外，更改选择框上的 ID:

<select id="selection1">
    <option value="1">Hands</option>
    <option value="2">Feet</option>
    <option value="3">Body</option>
</select>
<select id="selection2">
    <option value="1">Acne</option>
    <option value="2">Dry Skin</option>
    <option value="3">Redness</option>
    <option value="4">Sensitivity</option>
</select>

谢谢，

安德鲁