Heim Web-Frontend js-Tutorial So erstellen Sie mit JavaScript einen dynamischen Dropdown-Menüeffekt

So erstellen Sie mit JavaScript einen dynamischen Dropdown-Menüeffekt

Sep 26, 2017 am 10:10 AM
javascript js 创建

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>利用二维数组创建动态下拉菜单</title>
    <script type="text/javascript">
        //定义一个二维数组aCity,用于存储城市名称        
        var aCity=new Array();        
        aCity[0]=new Array();        
        aCity[1]=new Array();        
        aCity[2]=new Array();        
        aCity[3]=new Array();        
        aCity[4]=new Array();        
        aCity[5]=new Array();        //赋值,每个省份的城市存放在用于数组的一行        
        aCity[0][0]="--请选择--";        
        aCity[1][0]="--请选择--";        
        aCity[1][1]="东城区";       
        aCity[1][2]="西城区";        
        aCity[1][3]="朝阳区";        
        aCity[1][4]="海淀区";        
        aCity[1][5]="丰台区";        
        aCity[2][0]="--请选择--";        
        aCity[2][1]="福田区";        
        aCity[2][2]="罗湖区";        
        aCity[2][3]="南山区";        
        aCity[2][4]="宝安区";        
        aCity[2][5]="龙岗区";        
        aCity[2][6]="盐田区";        
        aCity[3][0]="--请选择--";       
         aCity[3][1]="越秀区";        
         aCity[3][2]="东山区";        
         aCity[3][3]="海珠区";        
         aCity[3][4]="荔湾区";        
         aCity[3][5]="天河区";        
         aCity[3][6]="白云区";        
         aCity[4][0]="--请选择--";        
         aCity[4][1]="西湖区";        
         aCity[4][2]="上城区";       
          aCity[4][3]="下城区";        
          aCity[4][4]="江干区";        
          aCity[4][5]="拱墅区";        
          aCity[4][6]="滨江区";        
          aCity[5][0]="--请选择--";        
          aCity[5][1]="新城区";        
          aCity[5][2]="碑林区";        
          aCity[5][3]="莲湖区";        
          aCity[5][4]="雁塔区";        
          aCity[5][5]="灞桥区";        
          aCity[5][6]="长安区";        
          aCity[5][7]="周至县";        
          function ChangeCity(){            
          var i,iProvinceIndex;            
          iProvinceIndex=document.frm.optProvince.selectedIndex;            
          iCityCount=0;            
          while(aCity[iProvinceIndex][iCityCount]!=null)                
          iCityCount++;                //计算选定省份的城市个数                
          document.frm.optCity.length=iCityCount; //改变下拉菜单的选项数                
          for(i = 0;i<=iCityCount-1;i++)  //改变下拉菜单的内容                    
          document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);                    
          document.frm.optCity.focus();
        }    </script></head><body onfocus="ChangeCity()">
    <h3>选择省份及城市</h3>
    <form name="frm">
        <p>省份:        <select name="optProvince" size="1" onchange="ChangeCity()">
            <option>--请选择--</option>
            <option>北京市</option>
            <option>深圳市</option>
            <option>广州市</option>
            <option>杭州市</option>
            <option>西安市</option>
        </select>
        </p>
        <p>城市:        
        <select name="optCity" size="1">
            <option>--请选择--</option>
        </select>
        </p>
    </form></body></html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit JavaScript einen dynamischen Dropdown-Menüeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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ßer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

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)

Wie erstelle ich einen Ordner auf Realme Phone? Wie erstelle ich einen Ordner auf Realme Phone? Mar 23, 2024 pm 02:30 PM

Titel: Realme Phone-Einsteigerhandbuch: Wie erstelle ich Ordner auf dem Realme Phone? In der heutigen Gesellschaft sind Mobiltelefone zu einem unverzichtbaren Hilfsmittel im Leben der Menschen geworden. Als beliebte Smartphone-Marke wird Realme Phone von Nutzern wegen seines einfachen und praktischen Betriebssystems geliebt. Bei der Verwendung von Realme-Telefonen können viele Menschen auf Situationen stoßen, in denen sie Dateien und Anwendungen auf ihren Telefonen organisieren müssen, und das Erstellen von Ordnern ist eine effektive Möglichkeit. In diesem Artikel erfahren Sie, wie Sie Ordner auf Realme-Telefonen erstellen, um Benutzern die bessere Verwaltung ihrer Telefoninhalte zu erleichtern. NEIN.

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

So erstellen Sie Pixelkunst in GIMP So erstellen Sie Pixelkunst in GIMP Feb 19, 2024 pm 03:24 PM

Dieser Artikel wird Sie interessieren, wenn Sie GIMP für die Erstellung von Pixelkunst unter Windows verwenden möchten. GIMP ist eine bekannte Grafikbearbeitungssoftware, die nicht nur kostenlos und Open Source ist, sondern Benutzern auch dabei hilft, auf einfache Weise schöne Bilder und Designs zu erstellen. GIMP ist nicht nur für Anfänger und professionelle Designer geeignet, sondern kann auch zum Erstellen von Pixelkunst verwendet werden, einer Form digitaler Kunst, bei der Pixel als einzige Bausteine ​​zum Zeichnen und Erstellen verwendet werden. So erstellen Sie Pixelkunst in GIMP Hier sind die wichtigsten Schritte zum Erstellen von Pixelbildern mit GIMP auf einem Windows-PC: Laden Sie GIMP herunter, installieren Sie es und starten Sie dann die Anwendung. Erstellen Sie ein neues Bild. Breite und Höhe ändern. Wählen Sie das Bleistiftwerkzeug aus. Stellen Sie den Pinseltyp auf Pixel ein. aufstellen

So erstellen Sie eine Familie mit Gree+ So erstellen Sie eine Familie mit Gree+ Mar 01, 2024 pm 12:40 PM

Viele Freunde haben geäußert, dass sie wissen möchten, wie man eine Familie in der Gree+-Software erstellt. Hier ist die Vorgehensweise für Sie. Freunde, die mehr wissen möchten, schauen Sie sich das an. Öffnen Sie zunächst die Gree+-Software auf Ihrem Mobiltelefon und melden Sie sich an. Klicken Sie dann in der Optionsleiste unten auf der Seite ganz rechts auf die Option „Mein“, um die Seite mit dem persönlichen Konto aufzurufen. 2. Nachdem ich auf meine Seite gekommen bin, gibt es unter „Familie“ die Option „Familie erstellen“. Nachdem Sie sie gefunden haben, klicken Sie darauf, um sie aufzurufen. 3. Wechseln Sie als nächstes zur Seite zum Erstellen einer Familie, geben Sie den festzulegenden Familiennamen gemäß den Eingabeaufforderungen in das Eingabefeld ein und klicken Sie nach der Eingabe auf die Schaltfläche „Speichern“ in der oberen rechten Ecke. 4. Abschließend erscheint unten auf der Seite die Meldung „Erfolgreich speichern“, die anzeigt, dass die Familie erfolgreich erstellt wurde.

So erstellen Sie ein Kontaktposter für Ihr iPhone So erstellen Sie ein Kontaktposter für Ihr iPhone Mar 02, 2024 am 11:30 AM

In iOS17 hat Apple seinen häufig verwendeten Telefon- und Kontakt-Apps eine Kontaktposterfunktion hinzugefügt. Mit dieser Funktion können Benutzer für jeden Kontakt personalisierte Poster festlegen, wodurch das Adressbuch visueller und persönlicher wird. Kontaktposter können Benutzern dabei helfen, bestimmte Kontakte schneller zu identifizieren und zu lokalisieren und so das Benutzererlebnis zu verbessern. Mit dieser Funktion können Benutzer je nach ihren Vorlieben und Bedürfnissen spezifische Bilder oder Logos zu jedem Kontakt hinzufügen, wodurch die Adressbuchoberfläche lebendiger wird. Apple bietet iPhone-Benutzern in iOS17 eine neuartige Möglichkeit, sich auszudrücken, und fügt ein personalisierbares Kontaktposter hinzu. Mit der Funktion „Kontaktposter“ können Sie einzigartige, personalisierte Inhalte anzeigen, wenn Sie andere iPhone-Benutzer anrufen. Du

Ein erster Blick auf Django: Erstellen Sie Ihr erstes Django-Projekt über die Befehlszeile Ein erster Blick auf Django: Erstellen Sie Ihr erstes Django-Projekt über die Befehlszeile Feb 19, 2024 am 09:56 AM

Beginnen Sie die Reise des Django-Projekts: Beginnen Sie von der Befehlszeile aus und erstellen Sie Ihr erstes Django-Projekt. Django ist ein leistungsstarkes und flexibles Webanwendungs-Framework. Es basiert auf Python und bietet viele Tools und Funktionen, die zum Entwickeln von Webanwendungen erforderlich sind. In diesem Artikel erfahren Sie, wie Sie Ihr erstes Django-Projekt über die Befehlszeile erstellen. Stellen Sie vor dem Start sicher, dass Python und Django installiert sind. Schritt 1: Erstellen Sie das Projektverzeichnis. Öffnen Sie zunächst das Befehlszeilenfenster und erstellen Sie ein neues Verzeichnis

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen Dec 18, 2023 pm 03:39 PM

Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

See all articles