Mysql Abfrage auf Javascript

Question

Ich versuche, Javascript, PHP und MySql alle zusammen zu verwenden und einige Ergebnisse zu erhalten. Ich habe etwas getan, aber es funktioniert nicht so, wie ich es erwartet hatte. Hoffe, da ist jemand, der mir hilft.

Grundsätzlich habe ich eine Kategorietabelle erstellt, die catID, catName, catDesc und catPar enthält.

In diesem Fall erstelle ich auch einige Hauptkategorien und Unterkategorien. Hauptkategorien haben keine catPar-Werte, aber wenn die Kategorie die untergeordnete Kategorie ist, erhält sie die Hauptkategorie-ID als übergeordnete Kategorie. (Unterkategorien können auch ein anderes Unter haben)

Ich habe eine Abfrage erstellt, um Hauptkategorien als eine Auswahlliste zu bringen und Unterkategorien mit einer anderen Abfrage und Javascript zu bringen, aber es funktioniert nicht wie erwartet (Es wird nicht erstellt eine andere Auswahlliste, nur überschreiben) und für den letzten Teil konnte ich keine Lösung finden.

Wenn ich abfrage und wenn es eine Unterkategorie gibt, ist alles in Ordnung, aber wenn es keine Unterkategorie mehr gibt, verschwindet die Auswahlliste und ich kann die letzte Kategorie nicht auswählen.

Ich würde gerne in der Lage sein, die Werte (wenn keine andere Unterkategorie enthält) in stabile Auswahloptionen, die ich nannte es final dann starten Sie erneut aus den Hauptkategorien.

Dann werde ich sie als multiple an die Datenbank senden.

Zusatz: Ich habe versucht, einige spezifische Zeichen für die Kategorien kurz vor ihrem Namen zu setzen, wenn sie eine Unterkategorie haben, aber ich konnte es nicht tun.

Das ist mein 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> 

und das ist mein 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 } ?> 

Sie können die Probenstruktur der Datenbanktabelle siehe unten; Sample database table

Vielen Dank von jetzt an.

Answer 1

Das Problem ist, dass die Ajax-Aufruf gibt nichts zurück, wenn die Unterkategorie keine weitere Unterkategorien hat, versuchen Sie eine leere Auswahlliste, zum Beispiel das Senden:

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

bearbeiten

Wenn Sie hinzufügen möchten Die ausgewählten Elemente zum Multiselect fügen eine Klasse zu den Selects mit den Kategorien hinzu und verwenden eine JavaScript-Funktion wie die folgende

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