jQuery PHP MySQL exemple de menu déroulant de liaison secondaire explication_jquery

La sélection du menu déroulant de lien de deuxième niveau est utilisée dans de nombreux endroits, tels que le lien déroulant de province et de ville, et le lien de sélection déroulante de taille de produit. Cet article expliquera à travers des exemples comment utiliser jQuery PHP MySQL pour obtenir l'effet de liaison déroulante secondaire de la classification des tailles.
Effet de mise en œuvre : Lorsqu'une catégorie principale est sélectionnée, les options dans la liste déroulante des sous-catégories changent également.

Principe de mise en œuvre : Selon la valeur de la catégorie majeure, la valeur est transmise au PHP d'arrière-plan pour traitement via jQuery. PHP interroge la base de données MySQl pour obtenir la petite catégorie correspondante. catégorie et renvoie les données JSON pour le traitement frontal.
XHTML
Nous devons d'abord créer deux zones de sélection déroulantes, la première est une catégorie principale et la seconde est une petite catégorie. Les valeurs des grandes catégories peuvent être écrites à l'avance ou lues dans la base de données.

<label>大类：</label> 
<select name="bigname" id="bigname"> 
  <option value="1">前端技术</option> 
  <option value="2">程序开发</option> 
  <option value="3">数据库</option> 
</select> 
<label>小类：</label> 
<select name="smallname" id="smallname"> 
<option value="1">flash</option> 
<option value="2">ps</option> 
</select> 

jQuery
Écrivez d'abord une fonction pour obtenir la valeur de la grande zone de sélection de catégorie, transmettez-la au serveur backend.php via la méthode $.getJSON, lisez les données JSON renvoyées par le backend et parcourez les données JSON via la méthode $.each pour écrire la valeur correspondante. Une chaîne d'option, et enfin ajouter l'option à la sous-classe.

function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); //清空原有的选项 
    $.each(json,function(index,array){ 
      var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
      smallname.append(option); 
    }); 
  }); 
} 

Notez qu'avant de parcourir et d'ajouter des données JSON, vous devez d'abord effacer les éléments d'origine dans la sous-catégorie. Il existe deux façons d'effacer les options, l'une est mentionnée dans le code ci-dessus, et il existe une méthode plus simple et plus directe :

smallname.(); 

Ensuite, exécutez la fonction appelante après le chargement de la page :

$(function(){ 
  getSelectVal(); 
  $("#bigname").change(function(){ 
    getSelectVal(); 
  }); 
}); 

Lorsque la page est initialisée, la liste déroulante doit définir les options, donc getSelectVal() est appelée au stade initial, et lorsque les principales options de catégorie changent, getSelectVal() est également appelée.
PHP

include_once("connect.php"); //链接数据库 
 
$bigid = $_GET["bigname"]; 
if(isset($bigid)){ 
  $q=mysql_query("select * from catalog where cid = $bigid"); 
  while($row=mysql_fetch_array($q)){ 
    $select[] = array("id"=>$row[id],"title"=>$row[title]); 
  } 
  echo json_encode($select); 
} 

Construisez une instruction SQL pour interroger la table de classification en fonction de la valeur de la catégorie principale transmise par jQuery, et enfin générer des données JSON. Sans instructions particulières, les connexions PHP et MySQL et les instructions de requête utilisées par ce site utilisent toutes des méthodes d'instruction originales telles que mysql_query, etc. Le but est de permettre aux lecteurs de connaître intuitivement la requête de transmission de données.
Enfin, attachez la structure de la table MYSQL :

CREATE TABLE `catalog` ( 
 `id` mediumint(6) NOT NULL auto_increment, 
 `cid` mediumint(6) NOT NULL default '0', 
 `title` varchar(50) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

Ce qui précède est une introduction à la façon d'implémenter un menu déroulant de liaison secondaire en combinant jQuery, PHP et MySQL. Le programme présente encore quelques lacunes et doit être amélioré. J'espère que cet article pourra vous inspirer.