javascript - 使用选择值在提交时构建 URL

Question

我正在尝试根据多个选择框的选择构建一个 URL。我发现了几个示例，其中人们希望在不单击提交按钮的情况下基于选择框选择将用户重定向到 URL，但我无法创建一个脚本来获取多个选择框的所有值，然后构建一个 URL 并在提交后将用户发送到该 URL。这是我到目前为止的代码，但它不起作用:

<form method="post" id="searchform">
<select class="dropdown" id="country">
<option value="england">england</option>
</select>
<select class="dropdown" id="sleeps">
<option value="2">2</option>
</select>
<select class="dropdown" id="pets">
<option value="3">3</option>
</select>
<input type="submit" name="button" id="button" onclick="showURL();" />
</form>

function showURL(){
    var d1 = $("#country").find(":selected").attr("value");
    var d2 = $("#sleeps").find(":selected").attr("value");
    var d3 = $("#pets").find(":selected").attr("value");
    var url = ("http://www.blah.com/"+d1+"?sleeps="+d2+"&pets="+d3);

    window.location = url;
    return false;
}

http://jsfiddle.net/RrS8L/

任何人都可以建议一种方法来完成这项工作吗？

谢谢!

杰米

Answer 1

创建DOM后，只需将您的代码放入正文中即可。

fiddle Demo

function showURL() {
    var d1 = $("#country").find(":selected").attr("value");
    var d2 = $("#sleeps").find(":selected").attr("value");
    var d3 = $("#pets").find(":selected").attr("value");
    var url = ("http://www.blah.com/" + d1 + "?sleeps=" + d2 + "&pets=" + d3);
    alert(url);
    window.location = url;
    return false;
}

---

或者将代码放在 head

fiddle Demo

---

如果你想禁用 Tom Chung 评论的表单提交

<input onclick="showURL();return false;"