php saisie Remplir une autre liste déroulante de la base de données en fonction de la sélection de la liste déroulante



spip formulaire contact (4)

rendre cette structure html sur la page de destination

<p><b>Category:</b><br />
 <?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A       Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."    </option>";

  }

echo"</select>";
?>

<div id='sub_categories'></div>

rendre une fonction js assignée à la liste déroulante de la catégorie

function loadSubCats(value)
{
  $.post('load_sub_cats.php',{catid : value},function{data}
                                             {
                                              $('#sub_categories').html(data);

                                             });

}

maintenant dans votre load_sub_cats.php

<p><b>Subcat1:</b><br />
<?php
  $catid = $_POST['cat_id']
  $query="SELECT id,subcat FROM subcat where catid = $catid";
  $result = mysql_query ($query);
  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

 echo"</select>";
?>

Vous devrez inclure jquery dans ce travail de code.

Je construis un site Web pour apprendre le codage et j'essaye de construire un outil où un utilisateur clique sur une sélection / liste déroulante qui contient des noms de catégorie tirés du chat de base de données et alors un autre sélection apparaîtra avec des noms de sous-catégorie tirés du subcat de base de données. C'est presque exactement comme Yelp (descendre aux catégories) comme Yelp (descendre aux catégories) .

J'ai aussi fait un diagramme:

J'ai déjà une liste déroulante de catégorie qui tire de la base de données de chat :

<p><b>Category:</b><br />
 <?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' class='e1'><option value='0'>Please Select A       Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."    </option>";

  }

echo"</select>";
?>

Et j'ai un subcat qui tire de la base de données subcat:

<p><b>Subcat1:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat";
  $result = mysql_query ($query);
  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

 echo"</select>";
?>

Comment faire une liste déroulante de sous-catégorie en fonction de ce que l'utilisateur clique sur la catégorie et la fait apparaître automatiquement? Merci beaucoup pour toute aide!


Answer #1

Étant donné que les données de votre liste déroulante Sous-catégorie dépendent de ce qui est sélectionné dans la catégorie, vous voulez probablement utiliser ajax. Vous pouvez définir un écouteur d'événement dans votre catégorie déroulante et quand il change vous pouvez demander les données pour la sous-catégorie déroulante et la peupler, il y a plusieurs façons de s'y prendre, ci-dessous est une option (en utilisant jquery) pour vous commencé.

// warning sub optimal jquery code 
$(function(){

   // listen to events on the category dropdown
   $('#cat').change(function(){

       // don't do anything if use selects "Select Cat"
       if($(this).val() !== "Select Cat") {

           // subcat.php would return the list of option elements 
           // based on the category provided, if you have spaces in 
           // your values you will need to escape the values
           $.get('subcat.php?cat='+ $(this).val(), function(result){
               $('#subcat').html(result);
           });

       }

   });

});

Answer #2

Si vous utilisez AJAX, vous voudrez que le deuxième bit de code soit un fichier php séparé que vous appellerez via AJAX. dans le rappel de l'appel AJAX, faites simplement (pseudo-code): someContainingDivOrSomething.innerHtml = responseBody; .

Notez que c'est généralement une mauvaise idée de faire des requêtes directement dans vos fichiers d'affichage PHP (séparation des préoccupations). Il y a plusieurs autres choses qui pourraient être améliorées. Cependant, cela vous aidera à démarrer.


Answer #3

Je voudrais juste mettre les variables en javascript avec php et ensuite utiliser les fonctions javascript .. pas besoin de jquery ou AJAX.

Cependant, vous devez avoir une clé étrangère pour les sous-catégories, peu importe ce que .. ie - Pour chaque enregistrement dans la table subcat vous devez lui donner un catid donc pour le référencement ...

<?php
  $db = new mysqli('localhost','user','password','dbname');//set your database handler
  $query = "SELECT id,cat FROM cat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("id" => $row['id'], "val" => $row['cat']);
  }

  $query = "SELECT id, catid, subcat FROM subcat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
    <script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 0; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
        }
      }
    </script>

  </head>

  <body onload='loadCategories()'>
    <select id='categoriesSelect'>
    </select>

    <select id='subcatsSelect'>
    </select>
  </body>
</html>




ajax