js implementiert benutzerdefinierte Dropdown-Box

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung eines benutzerdefinierten Dropdown-Felds zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen:

(1) Erstellen Sie eine Liste und ein Span-Tag (jedes beliebige Tag ist geeignet).

(2) Binden Sie an jedes Element in der Liste ein Klickereignis. Wenn Sie auf ein Element klicken, ändert sich der Span-Inhalt in den Inhalt dieses Elements und blendet dann die Liste aus.

(3) Um die Liste zunächst auszublenden, klicken Sie auf das Span-Tag, um es anzuzeigen. Wenn nichts ausgewählt ist, klicken Sie auf Dokument, um die Liste auszublenden.

(4) Jede Taste auf der Tastatur hat ihren eigenen Tastencode. Anhand dieses Tastencodes lässt sich bestimmen, welche Taste gedrückt werden muss, um die entsprechende Operation auszuführen. Die folgende Funktion kann den Tastencode der Tastatur ermitteln.

Dokument.addEventListener("keyup",Funktion(e){
                console.log(e.Schlüsselcode)
})

Kerncode: Inhalt, der durch die Auf-, Ab- und Eingabetasten auf der Tastatur ausgelöst wird

//Tastaturdruckereignis document.addEventListener("keyup",function(e){
                    var e=e||Fenster.e;
                    zurücksetzen()
                    //Aufwärtstaste if(e.keyCode=="38"){
                        Index--;
                        wenn(index<0){
                            index=Liste.Länge-1
                        }
                    }
                    //Taste runterif(e.keyCode=="40"){
                        Index++;
                        wenn(index>list.length-1){
                            Index = 0
                        }
                    }
                    //Bestätigungsschlüssel eingebenif(e.keyCode=="13"){
                        cite.innerHTML=list[index].innerHTML;    
                        ul.style.display="keine";    
                        zurückkehren ;
                    }
                    Liste[index].klassenName="bg";
                    
})

Vollständiger Code:

<!doctype html>
<html lang="de">

    <Kopf>
        <meta charset="UTF-8">
        <title>Dropdown-Menü</title>
        <style type="text/css">
            Körper,
            ul,
            li {
                Rand: 0;
                Polsterung: 0;
                Schriftgröße: 13px;
            }
            
            ul,
            li {
                Listenstil: keiner;
            }
            
            .divselect {
                Breite: 186px;
                Rand: 80px automatisch;
                Position: relativ;
                Z-Index: 10000;
            }
            
            .divselect zitieren {
                Breite: 150px;
                Höhe: 24px;
                Zeilenhöhe: 24px;
                Anzeige: Block;
                Farbe: #807a62;
                Cursor: Zeiger;
                Schriftstil: normal;
                Polsterung links: 4px;
                Polsterung rechts: 30px;
                Rand: 1px durchgezogen #333333;
            }
            
            .divselect ul {
                Breite: 184px;
                Rand: 1px durchgezogen #333333;
                Hintergrundfarbe: #ffffff;
                Position: absolut;
                Z-Index: 20000;
                Rand oben: -1px;
                Anzeige: keine;
            }
            
            .divselect ul li {
                Höhe: 24px;
                Zeilenhöhe: 24px;
            }
            
            .divselect ul li a {
                Anzeige: Block;
                Höhe: 24px;
                Farbe: #333333;
                Textdekoration: keine;
                Polsterung links: 10px;
                Polsterung rechts: 10px;
            }
            .divselect ul li:hover{
                 Hintergrund: #eee;
            }
            .bg{
                Hintergrund: #eee;
            }
        </Stil>

    </Kopf>

    <Text>
        <div Klasse="divselect">
            <span>Bitte klicken Sie, um eine Kategorie auszuwählen</span>
            <ul>
                <li>
                    <a href="javascript:;">ASP-Entwicklung</a>
                </li>
                <li>
                    <a href="javascript:;">.NET-Entwicklung</a>
                </li>
                <li>
                    <a href="javascript:;">PHP-Entwicklung</a>
                </li>
                <li>
                    <a href="javascript:;">Javascript-Entwicklung</a>
                </li>
                <li>
                    <a href="javascript:;">Java-Effekte</a>
                </li>
            </ul>
        </div>
        <Skripttyp="text/javascript">
            var cite = document.querySelector ("span"), //Ausgewählter Inhalt ul = document.querySelector ("ul"), //Liste list = document.querySelectorAll ("a"), //Ausgewähltes Element index = -1; //Index //Klicken Sie auf die Liste, um sie anzuzeigen cite.addEventListener ("click", function (e) {
                    var e=e||Fenster.e;
                    e.stopPropagation(); //Stoppt das Sprudeln, um das Auslösen versteckter, an das Dokument gebundener Ereignisse zu verhindern ul.style.display="block";
                })
                //Klick an jedes Listenelement binden for(var i=0;i<list.length;i++){
                    Liste[i].onclick=Funktion(){
                        zitieren.innerHTML=dieses.innerHTML;    
                        ul.style.display="none"; //Sie müssen hier nicht „hide“ schreiben. Wenn Sie „hide“ nicht schreiben, wird es in das Dokument eingeblendet und löst das Hide-Ereignis im Dokument aus}
                }
                //Tastaturdruckereignis document.addEventListener("keyup",function(e){
                    var e=e||Fenster.e;
                    zurücksetzen()
                    //Aufwärtstaste if(e.keyCode=="38"){
                        Index--;
                        wenn(index<0){
                            index=Liste.Länge-1
                        }
                    }
                    //Taste nach untenif(e.keyCode=="40"){
                        Index++;
                        wenn(index>list.length-1){
                            Index = 0
                        }
                    }
                    //Bestätigungsschlüssel eingebenif(e.keyCode=="13"){
                        cite.innerHTML=list[index].innerHTML;    
                        ul.style.display="keine";    
                        zurückkehren ;
                    }
                    Liste[index].klassenName="bg";
                    
                })
                //Klicken Sie auf das Dokument, um es auszublenden, wenn es nicht ausgewählt ist. document.addEventListener("click",function(){
                    ul.style.display="keine";
                })
                //Stil zurücksetzen Funktion reset(){
                    für(var i=0;i<Liste.Länge;i++){
                        Liste[i].Klassenname="";
                    }
                }
        </Skript>
    </body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js implementiert Echtzeitsuche und Echtzeitabgleich in einer Dropdown-Box mit Suchfunktion
Beispiel für das Abrufen des ausgewählten Werts aus dem Dropdown-Auswahlfeld mithilfe von jQuery und nativem JS
JS realisiert dynamisches Hinzufügen einer Dropdown-Box (mit Effekten)
Beispiel für eine kaskadierende Dropdown-Box in Vue.js 2.0 auswählen
JavaScript realisiert das dreistufige Verknüpfungs-Dropdown-Box-Menü von Provinzen, Städten und Bezirken
Zusammenfassung der Verwendung von Dropdown-Feldern von Select2.js
Der von ComboBoxTree in Extjs implementierte Dropdown-Boxbaumeffekt (selbstgeschrieben)
Beispiel für die Freigabe eines Klickereignisses für die Option „Dropdown-Box“ in JavaScript
js-Methode zum Realisieren der Eingabefunktion des Dropdown-Felds „Auswählen“
Dreistufige Verknüpfungs-Dropdown-Box-Menü für Provinz, Stadt und Bezirk, Javascript-Version

<<: Erste Schritte mit MySQL Sharding

>>: IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

So stellen Sie Docker-Containerdaten wieder her

js implementiert benutzerdefinierte Dropdown-Box

So stellen Sie Docker-Containerdaten wieder her

Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Handtrack.js-Bibliothek zur Echtzeitüberwachung von Handbewegungen (empfohlen)

Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite

Lösung für das Root-Passwort-Anmeldeproblem in MySQL 5.7

Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS

Zusammenfassung der MySQL-Entwicklungsstandards und -Nutzungskenntnisse

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux

Artikel empfehlen

Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht

Css3 realisiert nahtloses Scrollen und Anti-Shake

Implementierungsprinzip und Nutzungsanalyse des Apache Bench-Stresstest-Tools

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen

So stellen Sie die LNMP-Architektur im Docker bereit

Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)

Eine kurze Einführung in Vue-Filter, Lebenszyklusfunktionen und Vue-Ressourcen

Beispiel-Tutorial zum Zusammenführen und Teilen von MySQL nach angegebenen Zeichen

HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder

Lösung zum Vergessen des Root-Passworts der MySQL 5.7- und 8.0-Datenbank

CSS3-Animation – Erläuterung der Funktion „Steps“

MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen