Maison interface Web js tutoriel jQuery PHP MySQL exemple de menu déroulant de liaison secondaire explication_jquery

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

May 16, 2016 pm 03:35 PM

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> 

Copier après la connexion

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); 
    }); 
  }); 
} 
Copier après la connexion

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.(); 
Copier après la connexion

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

$(function(){ 
  getSelectVal(); 
  $("#bigname").change(function(){ 
    getSelectVal(); 
  }); 
}); 
Copier après la connexion

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); 
} 
Copier après la connexion

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; 
Copier après la connexion

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.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide jQuery Vérifiez si la date est valide Mar 01, 2025 am 08:51 AM

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément jQuery obtient un rembourrage / marge d'élément Mar 01, 2025 am 08:53 AM

jQuery obtient un rembourrage / marge d'élément

10 onglets jQuery Accordion 10 onglets jQuery Accordion Mar 01, 2025 am 01:34 AM

10 onglets jQuery Accordion

10 vaut la peine de vérifier les plugins jQuery 10 vaut la peine de vérifier les plugins jQuery Mar 01, 2025 am 01:29 AM

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console Http débogage avec le nœud et le http-console Mar 01, 2025 am 01:37 AM

Http débogage avec le nœud et le http-console

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

jQuery Ajouter une barre de défilement à div jQuery Ajouter une barre de défilement à div Mar 01, 2025 am 01:30 AM

jQuery Ajouter une barre de défilement à div

See all articles