Die Dropdown-Menüauswahl für Verknüpfungen der zweiten Ebene wird an vielen Stellen verwendet, z. B. für Dropdown-Verknüpfungen für Provinzen und Städte sowie für Dropdown-Auswahlverknüpfungen für Produktgrößen. In diesem Artikel wird anhand von Beispielen erläutert, wie Sie mit jQuery PHP MySQL den sekundären Drop-Down-Verknüpfungseffekt der Größenklassifizierung erzielen.
Implementierungseffekt: Wenn eine Hauptkategorie ausgewählt wird, ändern sich auch die Optionen im Dropdown-Feld der Unterkategorie.
Implementierungsprinzip: Entsprechend dem Wert der Hauptkategorie wird der Wert zur Verarbeitung über jQuery an die MySQL-Datenbank übergeben, um die entsprechende Kleinkategorie zu erhalten Kategorie und gibt JSON-Daten zurück. Für die Front-End-Verarbeitung.
XHTML
Zuerst müssen wir zwei Dropdown-Auswahlfelder erstellen, das erste ist eine Hauptkategorie und das zweite ist eine kleine Kategorie. Die Werte der Hauptkategorien können im Voraus geschrieben oder aus der Datenbank gelesen werden.
<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
Schreiben Sie zunächst eine Funktion, um den Wert des großen Kategorieauswahlfelds abzurufen, übergeben Sie ihn über die Methode $.getJSON an den Backend-Server.php, lesen Sie die vom Backend zurückgegebenen JSON-Daten und durchlaufen Sie die JSON-Daten über die Methode $.each um den entsprechenden Wert zu schreiben und die Option schließlich an die Unterklasse anzuhängen.
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);
});
});
}
Beachten Sie, dass Sie vor dem Durchlaufen und Anhängen von JSON-Daten zunächst die ursprünglichen Elemente in der Unterkategorie löschen müssen. Es gibt zwei Möglichkeiten, Optionen zu löschen. Eine wird im obigen Code erwähnt, und es gibt eine einfachere und direktere Methode:
smallname.();
Führen Sie dann die aufrufende Funktion aus, nachdem die Seite geladen wurde:
$(function(){
getSelectVal();
$("#bigname").change(function(){
getSelectVal();
});
});
Wenn die Seite initialisiert wird, muss das Dropdown-Feld die Optionen festlegen, daher wird getSelectVal() in der Anfangsphase aufgerufen, und wenn sich die Hauptkategorieoptionen ändern, wird auch getSelectVal() aufgerufen.
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);
}
Erstellen Sie eine SQL-Anweisung, um die Klassifizierungstabelle basierend auf dem von jQuery übergebenen Wert der Hauptkategorie abzufragen und schließlich JSON-Daten auszugeben. Ohne spezielle Anweisungen verwenden die von dieser Site verwendeten PHP- und MySQL-Verbindungen und Abfrageanweisungen alle ursprüngliche Anweisungsmethoden wie mysql_query usw. Der Zweck besteht darin, den Lesern ein intuitives Kennenlernen der Datenübertragungsabfrage zu ermöglichen.
Hängen Sie abschließend die MYSQL-Tabellenstruktur an:
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;
Das Obige ist eine Einführung in die Implementierung eines sekundären Verknüpfungs-Dropdown-Menüs durch die Kombination von jQuery, PHP und MySQL. Das Programm weist noch einige Mängel auf und muss verbessert werden.
