关于Javascript的Mysql查询

I'm trying to use Javascript, PHP and MySql all together and get some results. I've done something about it but it does not work as I expected. Hope there is someone to help me.

Basically I've created a category table, which includes catID, catName, catDesc, and catPar.

In this case I'm creating some main categories and sub-categories as well. Main categories don't have catPar values but if the category is the sub one, it gets main category ID in it as parent category. (Sub categories might have another sub as well)

I've been created a query to bring main categories as a select list and bring sub categories with another query and javascript but it does not work as I expected (It's not creating another select list, just overwriting) and for the final part, I could not find any solution.

When I do query and if there is a subcategory everything is ok but if there is no more subcategory select list is disappearing and I cannot select the final category.

I'd like to be able to put the values (if does not contain another sub-category) in stable select options, which I named it final then start again from the main categories.

Then, I will send them to database as multiple.

Addition: I've tried to put some specific characters for the categories just before than their name, if they have a sub category but I could not do it.

This is my index.php

<script>
function subs(str) {
    if (str == "") {
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("result").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","select_sub.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
<?php
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
?>
<form method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Add New Category</legend>
            <label for="category_name">Category Name</label>
                <input class="input250" type="text" name="category_name" value="" >
            <label for="category_description">Category Description</label>
                <input class="input350" type="text" name="category_description" value="" >
                    <?php
                    $select_mains="SELECT * FROM categoriestable WHERE catPar IS NULL";
                    $bring_mains = mysqli_query($con,$select_mains);
                        if(mysqli_num_rows($bring_mains)>0){
                    ?>
                    <label for="category_main">Main Category</label>
                        <select name="main_category" onchange="subs(this.value)">
                            <option value="0">Select a category</option>
                            <?php
                                while($main_categories = mysqli_fetch_array($bring_mains)) {
                                    echo "<option value='".$main_categories['catID']."'>".$main_categories['catName']."</option>";
                                }
                            ?>
                        </select>
                    <?php } else {} 
                    ?>
            <div id="result"></div>
            <select multiple="true" name="final" id="final">
                <option name="sub_category" id="cat" value="0" >Test</option>
            </select>
            <input type="submit" value="Add category">
    </fieldset>
</form>

and this is my select_sub.php

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$selected_main_category="SELECT * FROM categoriestable WHERE catPar = '".$q."'";
?>
<?php
    $has_sub_cat = mysqli_query($con,$selected_main_category);
    if(mysqli_num_rows($has_sub_cat)>0){
?>
<select id="sub_category" name="sub_category" onchange="subs(this.value)">
    <option name="sub_category" id="cat" value="0">Select a sub category</option>
    <?php while($add_to_list = mysqli_fetch_array($has_sub_cat)) {
            echo "<option value='".$add_to_list['catID']."'>".$add_to_list['catName']."</option>";
    } ?>
</select>
<?php } else { ?>
<?php   } ?>

You can see the sample structure of database table below; Sample database table

Thank you very much from now.

The problem is that the ajax call returns nothing when the subcategory has no other subcategories, try sending an empty select list, for example:

 <?php }else { ?>
     <select id="sub_category" name="sub_category">
       <option name="sub_category" id="cat" value="0">No subcategory</option>
     </select>
 <?php   } ?>

Edit

If you want to add the selected elements to the multiselect add a class to the selects with the categories and use a javascript function like the following

function addtoFinal(){
  var elements=document.getElementsByClassName("clazz");
  var opts="";
  for(var i=0;i<elements.length;i++){
    opts+="<option>"+elements[i].value+"</option>"
  }
  document.getElementById("final").innerHTML=opts;
}