Question

我在表单中有一个带过滤器的选择框，如何使用jquery替换onchange事件以避免整页刷新？我希望某些div块能够在选择某个选项时重新加载回调数据。

<form name="form_filter" action="<?php echo $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'#network-programs' ?>" method="post" enctype="multipart/form-data">
Genre:
<select name="filterGenre" id="filterGenre" onchange="this.form.submit()"  >
<option value="all" selected="selected">All</option>
<?php
$query1 = "SELECT * FROM video WHERE vcat_id IN(SELECT category_id FROM categories WHERE video_id IN(SELECT vid FROM `video` WHERE vuser_id='8') AND main_cat=1)";
$result = mysql_query($query1);

while($row = mysql_fetch_assoc($result)) {
    $vcat_id = stripslashes($row['vcat_id']);
    $vcat_name = stripslashes($row['vcat_name']);

    echo "<option value='".$vcat_id."'"; 
    if($vcat_id == $_POST['filterGenre']){echo ' selected ';}
    echo ">".$vcat_name."</option>";
}
?>
</select>

</form>

请指教，谢谢。

Answer 1

$(document).ready(function(){

$('#filterGenre').change(function(){

$.ajax({
      url   : your form action,
      data  : $('#your form id').serialize(),
      type : 'POST',
      success : function(data){
                      $('#yourdiv').html(data);
                  }

  })

})

})

从选择

中删除onchange

Answer 2

您可以将AJAX与jquery一起使用。

w3schools

Answer 3

你可以写下这样的东西：

<form id='form' ...
   <select name="filterGenre" id="filterGenre" onchange="send_it()" ...
   ...

<script>
   function send_it(){
                      $.ajax({
                         type: 'GET',
                         url: 'http://www.site.com/page.php',
                         data: $('#form').serialize(),
                         success: function(){
                            alert('done!');
                         }
                      });
   }
</script>

PHP Jquery onchange事件

3 个答案: