2013-04-18 77 views
1

我有一個選擇框與過濾器功能的形式,我怎麼能用jquery來取代onchange事件,以避免整個頁面刷新?我希望某些div塊能夠在某些選項被選中時重新加載回調數據。PHP的JQuery的onchange事件

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

請指教,謝謝。

+0

AJAX會爲你做它 – alwaysLearn 2013-04-18 07:16:38

回答

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); 
        } 

    }) 

}) 

}) 

從選擇

+0

如何'data'持有的HTML代碼和發送回到'#youdiv'? – conmen 2013-04-18 07:44:18

+0

其執行此操作的html()...它處理html元素的內部內容.. http://api.jquery.com/html/ – alwaysLearn 2013-04-18 08:35:43

+0

非常感謝你,它的幫助! – conmen 2013-04-18 08:46:43

0

除去平變化可以編寫這樣的事:

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