使用选择值提交时构建URL

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

  england   2   3   
 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之后，只需将代码放在body中。

小提琴演示

 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

小提琴演示

---

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

Answer 2

这是解决方案

两个示例都有效：

http://jsfiddle.net/RrS8L/9/

http://jsfiddle.net/RrS8L/10/

要么

 function showURL(event) { event.preventDefault(); 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; } 

Answer 3

使用Javascript链接的艺术

一个方便的小答案由howderek

JSFiddle： http ： //jsfiddle.net/howderek/RrS8L/22/

第1步：创建使用JavaScript传递数据的链接

你已经有一个很好的小函数来生成一个URL，但它需要一点修改才能更容易解析。 我让一切都来了? 为了更好地区分位置和传递给该页面的数据，以及更好地组织代码。 这是我修改过的showURL

 function showURL() { var d1 = $("#country").find(":selected").attr("value"), d2 = $("#sleeps").find(":selected").attr("value"), d3 = $("#pets").find(":selected").attr("value"), url = encodeURI('http://jsfiddle.net/howderek/RrS8L/20/show/light/?country=' + d1 + "&sleeps=" + d2 + "&pets=" + d3); alert(url); document.location = url; } 

我摆脱了你的内联onclick，我把表单设为div而不是表单（以防止提交），我将input type="submit"变成button

我还创建了一个段落来显示结果。

 
There was no information passed through the URL.
 
  England France Murica Russia   Less than 4 hours 4-8 hours More than 8 hours   None One Lots  Do stuff.  

第2步：使用JavaScript读取URL

我一段时间写了一个函数来读取URL键。 它返回由键命名的字符串组成的对象。 这使您可以轻松读取存储在URL中的值。

 function urlAnalyze(url) { if (url == undefined) { var url = document.location.toString(); } url = unescape(url); //seperates the parts of the url var parts = url.split("?"); //splits into sperate key=values if (parts[1] == undefined) { return 1; } var keyValues = parts[1].split("&"); var key = function () {} keyValues.forEach(function (keyValue) { var keyAndValue = keyValue.split("="); key[keyAndValue[0]] = keyAndValue[1]; }); return key; } $('#submit').click(showURL); keys = urlAnalyze(); if (keys['country']) { $('#results').html('In ' + keys['country'] + ', people like to sleep for ' + keys['sleeps'] + ' hours after walking their ' + keys['pets'] + ' pets.'); } 

我也很容易看到JSFiddle里面的URL是什么：

 $('#results')[0].innerHTML += '

URL of this: ' + document.location; 

您必须使用指向您网站的相应链接替换JSFiddle的链接，但我相信这应该可以回答您的问题。

以下是我在我的一个项目中使用我的函数URLTools的示例： http ： URLTools 20by％20javascript

请享用！