2012-07-11 58 views
1

我有一個簡單的跳轉菜單,我發現。它運行良好,直到我想它去一個「?」的頁面在網址中。它剝去「?」後的所有內容。 因此,當我嘗試去mywordpresspage /?id = 1時,跳轉菜單將我帶到mywordpresspage /。jquery跳轉菜單刪除「?」後的所有內容

我不知道很多關於jquery的...我主要使用php。

下面是代碼:

<script type="text/javascript" charset="utf-8"> 

$(document).ready(function() { 
    $('.site_quick_jump').change(function(){ 
     if ($(this).val() != '') { 
      $('#site_quick_jump_form').attr('action', $(this).val()); // 
      $('#site_quick_jump_form').submit(); // Go! 
     } 
    }); 
}); // doc ready 

</script> 


<form id="site_quick_jump_form" method="get" action=""> 
    Browse Survey:&nbsp; 
    <select class="site_quick_jump"> 
    <option></option> 
    <option value="mywordpresspage/?id=1">My WordPress Page 1</option> 
    <option value="mywordpresspage/?id=2">My WordPress Page 2</option> 
    <option value="mywordpresspage/?id=3">My WordPress Page 3</option> 
    </select> 
</form> 
+0

難道你不使用location.href而不是提交表單? – Undefined 2012-07-11 22:44:04

回答

2

好吧,這需要在網絡上參數的簡單說明。當你提出一個要求,宥可以發送參數有兩種方式:

  1. GET:該參數將作爲URL(「example.com/?foo=bar」)
  2. POST的一部分被髮送:參數送「的幕後(」 example.com」,{FOO:巴})

當您提交請求時(即當你$('#site_quick_jump_form').submit()。)您提交任何後來‘的網址’?作爲參數

* *編輯* *

一個可行的辦法是切換到POST :)因爲這似乎爲OP工作,我不會描述在長度其他選項,但你也可以有:

  • 做你的PHP代碼只要看看所有的參數和一個URL
  • 了你的JS代碼分離出來的查詢字符串(window.location.search)重新組裝它們,並把它作爲一個獨立的領域
+0

哦,你很快。我已經想出了答案,現在我明白它爲什麼有效了!謝謝!!! – PeggyMe 2012-07-11 22:43:44

+0

NP;很高興你能想出來 – machineghost 2012-07-11 22:43:59

+0

好吧,儘管我希望獲得積分,但指出他們也可以接受自己的答案是公平的嗎?無論哪種方式,我都100%同意OP應該接受他們提出的問題的答案,他們應該嘗試接受最能回答他們問題的答案(不管他們是否是他們自己的問題)。 – machineghost 2012-07-11 22:56:19

0

所以我發現答案是,不知道它爲什麼起作用,但它確實如此。我將action =「get」改爲action =「post」。

0

如果選項中唯一發生變化的是查詢字符串,可以通過將操作硬編碼到表單中並將選項更改爲僅指定查詢字符串值來簡化此操作。

$(function() { 
    $('.site_quick_jump').change(function() { 
     if (this.value) { 
      this.form.submit(); 
     } 
    }); 
}); 
<form id="site_quick_jump_form" method="get" action="mywordpresspage"> 
    Browse Survey: 
    <select class="site_quick_jump" name="id"> 
     <option></option> 
     <option value="1">My WordPress Page 1</option> 
     <option value="2">My WordPress Page 2</option> 
     <option value="3">My WordPress Page 3</option> 
    </select> 
</form> 

說明:

當表單提交,則表格數據被通過爲各形式的元素名稱爲相應的值,通過分開組合創建=。這些名稱值對中的每一個都與&組合以形成最終的表格數據。

當一個表格與method="post"一起提交時,該數據填充到http請求的正文中。如果用戶嘗試刷新頁面,他們會收到警告,表示他們將重新提交表單。如果用戶點擊後退按鈕返回頁面,他們會收到警告,表明該頁面已過期。你不希望你的用戶得到這些警告。

但是,當一個表格與method="get"一起提交時,表格數據被追加到?之後的URL中。沒有警告要處理。