jquery - 使用 SELECT 作为 post 值加载数据

Question

我正在使用以下 HTML：

<select name="compet" id="compet"></select>
<select  name="spage" id="spage">
  <option value="home">Home</option>
  <option value="insert">Insert</option>
  <option value="ranking">change</option>
  <option value="details">Details</option>
</select>
<input type="submit" name="ChangePage" id="Goto" onclick="change_page()" value="ChangePage" /> 

和以下 jQuery（我希望单击按钮通过 AJAX 将新页面加载到 div 中）：

<script  type="text/javascript">
  function change_page(){
    $.ajax({
      url: '', // This is where I want to get the value based on the SELECT
      type: 'POST',
      data: { compet: $('#compet').val() },
      success: function(data){
        $(".myresult").html(data);
      }
    })
  }
</script>

我希望 URL 基于SELECT选择的项目。不过，不知道如何做到这一点。任何的意见都将会有帮助！

Answer 1

这应该有效（nb，未经测试）

<script  type="text/javascript">
  function change_page(){

     var myurl;

     switch($("#spage").val())
     {
        case "home":
          myurl = "http://mysite.com";
          break;
        case "insert":
          myurl = "http://mysite.com/insert";
          break;
        case "ranking":
          myurl = "http://mysite.com/ranking";
          break;
 // etc
     }


    $.ajax({
      url: myurl,
      type: 'POST',
      data: { compet: $('#compet').val() },
      success: function(data){
        $(".myresult").html(data);
      }
    })
  }
</script>

Answer 2

在我更改此 HTML 后，它现在可以工作了

<select name="compet" id="compet"></select>
<select  name="spage" id="spage">
  <option value="home">Home</option>
  <option value="insert">Insert</option>
  <option value="ranking">change</option>
  <option value="details">Details</option>
</select>
<input type="button" name="ChangePage" id="Goto" onclick="change_page()" value="ChangePage" /> // I changed type to button from submit

谢谢