使用ajax和php选择行表

Question

I have a drop menu that includes some category every category has their own subcategory i want to show them buy selecting category name but it's not working, did i miss something or am i doing it completely wrong?

<script type="text/javascript">
    $(function() {
        $("#error").hide();
        $("#category").change(function(){
            $("#error").hide();
            var category = $("#category").val();
            if (category == "") {
               $("#error").show();
                return false;
            }   
            var data = $("#form").serialize();
            $.ajax({
               type:"POST",
               url:"index.php",
               data:data,
               success: function(){ 
               }
            });
            return false;
        }); 
    });  
</script>


<form id="form" name="form">
    <label for="category" id="error">Empty</label>
    <select name="category" id="category">
        <option></option>
        <option value="News">News</option>
        <option value="Items">Items</option>
        <option value="Updates">Updates</option>
    </select>
</form>

<?php

include("connect.php");
if(!empty($_POST['category'])){
    $sql=$con->prepare("SELECT * FROM categorys WHERE category=:category ");
    $sql->bindparam(":category",$_POST['category']);
    $sql->execute();

    while($r=$sql->fetch()){
        echo $r['subcategory'];
    }
}
?>

Answer 1

SomePage.php

<form id="form" name="form">
    <div id='category'>
        <label for="category" id="error">Empty</label>
        <select name="category" id="category">
            <option></option>
            <option value="News">News</option>
            <option value="Items">Items</option>
            <option value="Updates">Updates</option>
        </select>
    </div>
    <div id='subcategory'>
    </div>
</form>


<script>
    $('#category').change(function(){
        var CatName= $('#category').val();
        $.ajax({url:"AjaxSelectCategory.php?CatName="+CatName,cache:false,success:function(result){
            $('#subcategory').html(result);
        }});
    });
</script>

Create New Page AjaxSelectCategory.php [NOTE: If you want to change this page name. Change in <script></script> tag too. Both are related.]

<?php
include("connect.php");
if(!empty($_GET['CatName']))
{
    $sql=$con->prepare("SELECT * FROM categorys WHERE category=:category ");
    $sql->bindparam(":category",$_GET['CatName']);
    $sql->execute();
    ?>
    <select name='subcategory'>
    <?php
    while($r=$sql->fetch())
    {?>
        <option value="<?php echo $r['subcategory'];?>"><?php echo $r['subcategory'];?></option>
    </select>
    <?php }
}?>