2012-09-18 71 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