2012-09-18 48 views
3

的onChange我已经打开了这个问题的问题,但它是非常糟糕的制定,因为我并没有得到很好的响应....所以继承人另一个尝试...希望这是确定提交使用漂亮的URL


我有一个选择的标签形式和内部

<form> 
    <select> 
    <option selected="selected"></option> 
    <option value="1" data-seourl="food-intake">Food intake</option> 
    <option value="2" data-seourl="homemade-cake">Homemade cake</option> 
    <option value="3" data-seourl="good-fruits">Good fruits</option> 
    <option value="4" data-seourl="apple-type">Apple type</option> 
    </select> 
</form> 

一些选项当我选择(平变化),我想提出一个友好的URL到ressembles此服务器的选项:

http://www.mywebsite/kitchen/food-intake.1 
http://www.mywebsite/kitchen/homenade-cake.2 
... 

,而不是发送默认:

http://mywebsite/kitchen/?category=1 
http://mywebsite/kitchen/?category=2 

我知道如何使用mod_rewrite,所以这不是一个问题。我需要了解如何提交一个友好的网址,而不是默认的?

是JavaScript的(jQuery的在这种情况下),唯一的解决办法还是有一个本地的解决方案?

感谢

+0

这将是一个更容易在jQuery的做。你喜欢哪个? –

+0

没有“原生”选项,但使用JavaScript(例如jQuery)来操纵浏览器必须去的URL。 – Styxxy

+0

我会投票给jQuery的太多,这将是更清洁,让您使用的路由作为选择框的值的部分动态生成URL。这会让你得到大约3行代码。 –

回答

3

试试这个:

$('select').change(function() 
{ 
    var $option = $(this).find('option:selected'); 
    if ($option.length) 
    { 
     window.location.href = 'http://www.mywebsite/kitchen/'+ 
           $option.attr('data-seourl')+'.'+ 
           $option.attr('value'); 
    } 
}); 

注:这不是技术上<form>提交,但真正你可以因为形式合理要做的就是去尝试别查询字符串追加你不想要。虽然这两种方法都会产生HTTP GET请求。

+0

如果页面被允许更改/重装:) – Andreas

+0

嗯,这是真的“提交”的形式没有它会附上查询字符串中的唯一理智的方式。 :) – jimp

+1

试过这一个,似乎做了这项工作。在Chrome浏览器,Firefox和Firefox浏览器上都可以正常工作,对了,IE 9也是如此!感谢 – Marco

1

类似服从跳的回答,您可以使用jQuery的AJAX功能:

$('select').change(function() { 
    var $option = $(this).find('option:selected'); 
    var url = 'http://www.mywebsite/kitchen/' 
     + $option.attr('data-seourl') 
     + '.' 
     + $option.attr('value'); 
    if ($option.length) { 
     console.log("Sending this data via POST request: ", $("form").serialize()); 
     $.post(url, $("form").serialize(), function(data) { 
      console.log("POST request got this response back:", data); 
     }); 
    } 
}); 

参见:

+0

感谢的努力和答案 – Marco