Heim Web-Frontend js-Tutorial jQuery PHP MySQL erreicht eine unendliche kaskadierende Dropdown-Box effect_jquery

jQuery PHP MySQL erreicht eine unendliche kaskadierende Dropdown-Box effect_jquery

May 16, 2016 pm 03:14 PM
jquery mysql php

Dieser Artikel implementiert einfach den unendlichen Kaskadeneffekt von jQuery und teilt ihn als Referenz mit allen. Der spezifische Inhalt ist wie folgt
Rendering:

 Nur ​​Dropdown-Feld Bild 1

Abbildung 2 Dropdown-Feld „Level-Eingabeaufforderung“

Abbildung 3 Klickreaktion auf Speicherdaten

Enthält hauptsächlich 3 Dateien: index.html (Homepage), wuxianjilian.php (Datenverarbeitung), wuxianjilian.sql (MySQL-Datendatei)
1. index.html

<html>
<head>
  <title>无限级联</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="zh-CN" />
  <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="jilianContainer"></div>
<script type="text/javascript">
$(document).ready(function(){
  var getData = function(obj){
    $.ajax({
      url:'wuxianjilian.php',
      type:'POST',
      data:{"pid":obj.val()},
      dataType:'json',
      async:false,
      success:function(data){
        if($(".selection").length){
          $(".selection:gt("+$(obj).index()+")").remove();  //移除后面所有子级下拉菜单
          $(".selection:last").after(data);          //添加子级下拉菜单
        }else {
          $("#jilianContainer").append(data);          //初始加载情况
        }
        //所有下拉响应
        $(".selection").unbind().change(function(){
          getData($(this));
        });
      },
      error:function(msg){
        alert('error');
      }
    });
  }
  
  //Init
  getData($(this));
  
});
</script>

<!-- 数据存储示例,仅提取数据,不做操作 -->

<div style="height:100px;display:block;"></div>
<input type="button" value="存储数据" id="save"></input>
<script type="text/javascript">
$(document).ready(function(){
  $("#save").click(function(){
    var data = [];
    $(".selection").each(function(){
      data.push($.trim($(this).val()));
    })
    
    alert(data.join(','));
  });
});
</script>

</body>
</html>
Nach dem Login kopieren


2. wuxianjilian.php

<&#63;php
  header("Content-type: text/html; charset=utf-8"); 

  //数据库连接操作
  $conn = mysql_connect("localhost","Zjmainstay","") or die("Can not connect to database.Fatal error handle by ". __FILE__);
  mysql_select_db("test",$conn);      //数据库名为 test
  mysql_query("SET NAMES utf8",$conn);
  
  //获取父级id
  $pid = (int)$_POST['pid'];
  
  //查询子级
  $sql = "SELECT id,text FROM `wuxianjilian` WHERE pid={$pid}";
  $result = mysql_query($sql,$conn);
  
  //组装子级下拉菜单
  $html = '';
  while($row = mysql_fetch_assoc($result)){
    $html .= '<option value="'.$row['id'].'">'.$row['text'].'</option>';
  }

  if(!empty($html)) $html = '<select class="selection"><option value="">请选择</option>' . $html . '</select>';
  
  //输出下拉菜单
  echo json_encode($html);
//End_php
Nach dem Login kopieren


3. wuxianjilian.sql

wuxianjilian.sql
/*
Navicat MySQL Data Transfer

Source Server     : localhost
Source Server Version : 50516
Source Host      : localhost:3306
Source Database    : test

Target Server Type  : MYSQL
Target Server Version : 50516
File Encoding     : 65001

Date: 2012-10-24 20:59:09
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `wuxianjilian`
-- ----------------------------
DROP TABLE IF EXISTS `wuxianjilian`;
CREATE TABLE `wuxianjilian` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pid` int(11) DEFAULT NULL,
 `text` varchar(32) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of wuxianjilian
-- ----------------------------
INSERT INTO `wuxianjilian` VALUES ('1', '0', 'A0');
INSERT INTO `wuxianjilian` VALUES ('2', '0', 'B0');
INSERT INTO `wuxianjilian` VALUES ('3', '1', 'C1');
INSERT INTO `wuxianjilian` VALUES ('4', '1', 'D1');
INSERT INTO `wuxianjilian` VALUES ('5', '1', 'E1');
INSERT INTO `wuxianjilian` VALUES ('6', '2', 'F2');
INSERT INTO `wuxianjilian` VALUES ('7', '2', 'G2');
INSERT INTO `wuxianjilian` VALUES ('8', '3', 'H3');
INSERT INTO `wuxianjilian` VALUES ('9', '3', 'I3');
INSERT INTO `wuxianjilian` VALUES ('10', '3', 'J3');
INSERT INTO `wuxianjilian` VALUES ('11', '3', 'K3');
INSERT INTO `wuxianjilian` VALUES ('12', '4', 'L4');
INSERT INTO `wuxianjilian` VALUES ('13', '4', 'M4');
INSERT INTO `wuxianjilian` VALUES ('14', '8', 'N8');
INSERT INTO `wuxianjilian` VALUES ('15', '9', 'N9');
INSERT INTO `wuxianjilian` VALUES ('16', '14', 'O14');
INSERT INTO `wuxianjilian` VALUES ('17', '14', 'P14');
INSERT INTO `wuxianjilian` VALUES ('18', '14', 'Q14');
INSERT INTO `wuxianjilian` VALUES ('19', '17', 'R17');
INSERT INTO `wuxianjilian` VALUES ('20', '17', 'S18');
INSERT INTO `wuxianjilian` VALUES ('21', '20', 'T20');
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

MySQL: Eine Einführung in die beliebteste Datenbank der Welt MySQL: Eine Einführung in die beliebteste Datenbank der Welt Apr 12, 2025 am 12:18 AM

MySQL ist ein Open Source Relational Database Management -System, das hauptsächlich zum schnellen und zuverlässigen Speicher und Abrufen von Daten verwendet wird. Sein Arbeitsprinzip umfasst Kundenanfragen, Abfragebedingungen, Ausführung von Abfragen und Rückgabergebnissen. Beispiele für die Nutzung sind das Erstellen von Tabellen, das Einsetzen und Abfragen von Daten sowie erweiterte Funktionen wie Join -Operationen. Häufige Fehler umfassen SQL -Syntax, Datentypen und Berechtigungen sowie Optimierungsvorschläge umfassen die Verwendung von Indizes, optimierte Abfragen und die Partitionierung von Tabellen.

PHP und Python: Vergleich von zwei beliebten Programmiersprachen PHP und Python: Vergleich von zwei beliebten Programmiersprachen Apr 14, 2025 am 12:13 AM

PHP und Python haben jeweils ihre eigenen Vorteile und wählen nach den Projektanforderungen. 1.PHP ist für die Webentwicklung geeignet, insbesondere für die schnelle Entwicklung und Wartung von Websites. 2. Python eignet sich für Datenwissenschaft, maschinelles Lernen und künstliche Intelligenz mit prägnanter Syntax und für Anfänger.

Der aktuelle Status von PHP: Ein Blick auf Webentwicklungstrends Der aktuelle Status von PHP: Ein Blick auf Webentwicklungstrends Apr 13, 2025 am 12:20 AM

PHP bleibt in der modernen Webentwicklung wichtig, insbesondere in Content-Management- und E-Commerce-Plattformen. 1) PHP hat ein reichhaltiges Ökosystem und eine starke Rahmenunterstützung wie Laravel und Symfony. 2) Die Leistungsoptimierung kann durch OPCACHE und NGINX erreicht werden. 3) Php8.0 führt den JIT -Compiler ein, um die Leistung zu verbessern. 4) Cloud-native Anwendungen werden über Docker und Kubernetes bereitgestellt, um die Flexibilität und Skalierbarkeit zu verbessern.

Warum MySQL verwenden? Vorteile und Vorteile Warum MySQL verwenden? Vorteile und Vorteile Apr 12, 2025 am 12:17 AM

MySQL wird für seine Leistung, Zuverlässigkeit, Benutzerfreundlichkeit und Unterstützung der Gemeinschaft ausgewählt. 1.MYSQL bietet effiziente Datenspeicher- und Abruffunktionen, die mehrere Datentypen und erweiterte Abfragevorgänge unterstützen. 2. Übernehmen Sie die Architektur der Client-Server und mehrere Speichermotoren, um die Transaktion und die Abfrageoptimierung zu unterstützen. 3. Einfach zu bedienend unterstützt eine Vielzahl von Betriebssystemen und Programmiersprachen. V.

PHP: Die Grundlage vieler Websites PHP: Die Grundlage vieler Websites Apr 13, 2025 am 12:07 AM

Die Gründe, warum PHP für viele Websites der bevorzugte Technologie -Stack ist, umfassen die Benutzerfreundlichkeit, die starke Unterstützung der Community und die weit verbreitete Verwendung. 1) Einfach zu erlernen und zu bedienen, geeignet für Anfänger. 2) eine riesige Entwicklergemeinschaft und eine reichhaltige Ressourcen haben. 3) in WordPress, Drupal und anderen Plattformen häufig verwendet. 4) Integrieren Sie eng in Webserver, um die Entwicklung der Entwicklung zu vereinfachen.

Mysqls Platz: Datenbanken und Programmierung Mysqls Platz: Datenbanken und Programmierung Apr 13, 2025 am 12:18 AM

Die Position von MySQL in Datenbanken und Programmierung ist sehr wichtig. Es handelt sich um ein Open -Source -Verwaltungssystem für relationale Datenbankverwaltung, das in verschiedenen Anwendungsszenarien häufig verwendet wird. 1) MySQL bietet effiziente Datenspeicher-, Organisations- und Abruffunktionen und unterstützt Systeme für Web-, Mobil- und Unternehmensebene. 2) Es verwendet eine Client-Server-Architektur, unterstützt mehrere Speichermotoren und Indexoptimierung. 3) Zu den grundlegenden Verwendungen gehören das Erstellen von Tabellen und das Einfügen von Daten, und erweiterte Verwendungen beinhalten Multi-Table-Verknüpfungen und komplexe Abfragen. 4) Häufig gestellte Fragen wie SQL -Syntaxfehler und Leistungsprobleme können durch den Befehl erklären und langsam abfragen. 5) Die Leistungsoptimierungsmethoden umfassen die rationale Verwendung von Indizes, eine optimierte Abfrage und die Verwendung von Caches. Zu den Best Practices gehört die Verwendung von Transaktionen und vorbereiteten Staten

PHP: Eine Schlüsselsprache für die Webentwicklung PHP: Eine Schlüsselsprache für die Webentwicklung Apr 13, 2025 am 12:08 AM

PHP ist eine Skriptsprache, die auf der Serverseite weit verbreitet ist und insbesondere für die Webentwicklung geeignet ist. 1.PHP kann HTML einbetten, HTTP -Anforderungen und Antworten verarbeiten und eine Vielzahl von Datenbanken unterstützt. 2.PHP wird verwendet, um dynamische Webinhalte, Prozessformdaten, Zugriffsdatenbanken usw. mit starker Community -Unterstützung und Open -Source -Ressourcen zu generieren. 3. PHP ist eine interpretierte Sprache, und der Ausführungsprozess umfasst lexikalische Analyse, grammatikalische Analyse, Zusammenstellung und Ausführung. 4.PHP kann mit MySQL für erweiterte Anwendungen wie Benutzerregistrierungssysteme kombiniert werden. 5. Beim Debuggen von PHP können Sie Funktionen wie error_reporting () und var_dump () verwenden. 6. Optimieren Sie den PHP-Code, um Caching-Mechanismen zu verwenden, Datenbankabfragen zu optimieren und integrierte Funktionen zu verwenden. 7

PHP vs. Python: Kernmerkmale und Funktionen PHP vs. Python: Kernmerkmale und Funktionen Apr 13, 2025 am 12:16 AM

PHP und Python haben jeweils ihre eigenen Vorteile und eignen sich für verschiedene Szenarien. 1.PHP ist für die Webentwicklung geeignet und bietet integrierte Webserver und reichhaltige Funktionsbibliotheken. 2. Python eignet sich für Datenwissenschaft und maschinelles Lernen mit prägnanter Syntax und einer leistungsstarken Standardbibliothek. Bei der Auswahl sollte anhand der Projektanforderungen festgelegt werden.

See all articles