Die Beispiele in diesem Artikel teilen die Spezialeffekte des JS-Dropdown-Menüs für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Beispiel 1: verlinktes Dropdown-Menü der Provinz und des Gemeinde
Das Onchange -Ereignis tritt auf, wenn sich der Inhalt der Domäne ändert.
<script type = "text/javaScript"> var arr = new Array (); // Datenarray // Daten definieren, Struktur: ID, Name, übergeordnete ID arr [arr.length] = [1, 'peking', null]; arr [arr.Length] = [2, 'Sichuan', null]; arr [arr.Length] = [3, 'Guangdong', null]; arr [arr.length] = [4, 'peking', 1]; arr [arr.length] = [5, 'chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; // Dynamische Einstellung der Funktionsfunktionen für Pulldown-Elemente (Typ) {if (Typ == 'Provinz') {// DOM der Dropdown-Menü der Provinz erhalten var provinz = document.getElementById ("Provinz"); Provinz.innerhtml = ''; // Inhalt zuerst leer // Füllen Sie das sub-character var prostr = '<option value = ""> </option>' aus; // Übertragen Sie das Array für (var i = 0; i <arr.Length; i ++) {var item = arr [i]; // aktuelles Element // Wenn es keine übergeordnete ID gibt, ist es die Provinz, wenn (Element [2] == NULL) prostr+= '<Option Value ='+item [0]+'>'+Element [1]+'</option>'; } provinz.innernhtml = prostr; // neue Inhalte ausfüllen} else if (type == 'city') {// Die ID der aktuellen Provinz var currproid = document.getElementById ("Provinz"). Wert; if (currproid == '') return false; // Erhalten Sie das DOM of the City Dropdown-Menü var City = document.getElementById ("City"); City.innerhtml = ''; // Füllen Sie zuerst den Inhalt aus // Füllen Sie das Zeichen var Citystr = '<Option Value = ""> </option>' aus; // transweep das Array für (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Aktueller Artikel // Beurteilen Sie, ob es sich um die aktuelle gespeicherte Stadt handelt. } City.InnerHtml = CityStr; // neue Inhalte füllen}} </script> <body style = "text-align: center;" onload = "fülle ('provinz');"> <!-Dropdown-Menü definieren-> Einsparungen: <select id = "provinz" onchange = "filopions ('city')"> </select> <br/> <br/> Stadt: <select id = "Stadt"> </select> <br/> </by> </body>Beispiel 2: Drei-Stufe Verknüpfung der Dropdown-Menüs von Provinzen, Städten und Landkreisen
<script type = "text/javaScript"> var arr = new Array (); // Datenarray // Daten definieren, Struktur: ID, Name, übergeordnete ID arr [arr.length] = [1, 'peking', null]; arr [arr.Length] = [2, 'Sichuan', null]; arr [arr.Length] = [3, 'Guangdong', null]; arr [arr.length] = [4, 'peking', 1]; arr [arr.length] = [5, 'chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; arr [arr.length] = [8, 'Wuhou District', 5]; arr [arr.length] = [9, 'Qingyang District', 5]; arr [arr.length] = [10, 'Baiyun District', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'conghua City', 6]; // Dynamische Einstellung der Pulldown-Projektfunktionsfüllungen (Typ) {if (type == 'provinz') {// das DOM der Dropdown-Menü der Provinz abrufen var provinz = document.getElementById ("Provinz"); Provinz.innerhtml = ''; // Der Inhalt ist zuerst leer // Füllen Sie die Zeichen des gespeicherten var prostr = '<option value = ""> </option>' aus; für (var i = 0; i <arr.length; i ++) {// Übertragen Sie das Array var item = arr [i]; // aktuelles Element // Wenn es keine übergeordnete ID gibt, ist es die Provinz, wenn (Element [2] == NULL) prostr+= '<Option Value ='+item [0]+'>'+Element [1]+'</option>'; } provinz.innerhtml = protr; // neue Inhalte ausfüllen} else if (type == 'City') {// Erhalten Sie die ID der aktuellen Provinz var currproid = document.getElementById ("Provinz"). Wert; if (currproid == '') return false; // Erhalten Sie das DOM of the City Dropdown-Menü var City = document.getElementById ("City"); City.innerhtml = ''; // Inhalt zuerst leer // Füllen Sie das Stadtzeichen var Citystr = '<Option Value = ""> </option>' aus; für (var i = 0; i <arr.length; i ++) {// Übertragen Sie das Array var item = arr [i]; // aktueller Artikel // Beurteilen Sie, ob es sich um die aktuell gespeicherte Stadt handelt, wenn (Artikel [2] == Currproid) CityStr+= '<Option Value ='+Item [0]+'>'+Element [1]+'</option>'; } City.InnerHtml = CityStr; // neue Inhalte ausfüllen} else if (type == 'Bereich') {// Erhalten Sie die ID der aktuellen Stadt var curcityId = document.getElementById ("City"). Wert; if (curcityId == '') return falsch; // Holen Sie sich das DOM des Dropdown-Menüs des Distrikts und des County Var Area = document.getElementById ("Bereich"); Area.InnerHtml = ''; // Füllen Sie den Distrikt und das Bezirkszeichen var roresstr = '<Option Value = ""> </option>' aus; für (var i = 0; i <arr.length; i ++) {// Übertragen Sie das Array var item = arr [i]; // Aktueller Artikel // Beurteilen Sie, ob es sich um einen Distrikt oder ein Landkreis unter der aktuellen Stadt handelt, wenn (Artikel [2] == curcityId) roresTR+= '<Option Value ='+item [0]+'>'+Element [1]+'</option>'; } Area.InnerHtml = bornSTR; // neue Inhalte füllen}} </script> <body style = "text-align: center;" onload="fillOptions('province');"> <!-- Define drop-down menu--> Province: <select id="province" onchange="fillOptions('city')"></select><br/><br/> City: <select id="city" onchange="fillOptions('area')"></select><br/><br/> County/district: <select ID = "Area"> </select> <br/> <br/> </body>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.