使用选择值提交时构建URL [英] Build URL upon submit using select values

问题描述

我正在尝试根据几个选择框的选择来构建URL。我找到了几个例子，人们想要根据选择框选择将用户重定向到URL而不点击提交按钮，但是我无法创建一个脚本，该脚本获取几个选择框的所有值，然后构建URL并在提交时将用户发送到该URL。这是我到目前为止的代码，但它不起作用：

 < form method =postid = searchform > 
< select class =dropdownid =country> 
< option value =england> england< / option> 
< / select> 
< select class =dropdownid =sleeps> 
< option value =2> 2< / option> 
< / select> 
< select class =dropdownid =pets> 
< option value =3> 3< / option> 
< / select> 
< input type =submitname =buttonid =buttononclick =showURL（）; /> 
< / form> 
 
函数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; 
返回false; 
} 
  

  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; 
返回false; 
} 
  

---

或者将代码放在<$ c $中c>头

 < input onclick =showURL（）; return false;  
  

I'm trying to build a URL based upon the selection of several select boxes. I've found several examples where people have wanted to redirect users to a URL based on a select box selection without clicking a submit button, but I've not been able to create a script which takes all the values of several select boxes and then builds a URL and sends the user to that URL upon submit. Here is the code I have so far, but it isn't working:

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

Can anybody suggest a way to make this work?

Thanks!

Jamie

解决方案

Just place your code in body after DOM is created.

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

---

Or place you code in head

fiddle Demo

---

if you want disable form submission commented by Tom Chung

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

这篇关于使用选择值提交时构建URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！