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>

我希望网址基于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

谢谢

使用SELECT作为后置值加载数据

2 个答案: