PHP Jquery onchange event

本文关键字：event onchange Jquery PHP | 更新日期: 2023-09-27

我有一个选择框过滤器功能的形式，我怎么能使用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>

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

remove onchange from select

您可以使用AJAX与jquery。

w3schools

你可以这样写:

<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>