Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind

Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche Anforderung gestoßen und habe sie zur zukünftigen Verwendung aufgezeichnet.

Nachfragehintergrund

Navigieren Sie mithilfe der Tastenkombination zum Auswahlfeld für die Zahlungsmethode (eine Dropdown-Liste) auf der Seite und wählen Sie es aus.

Technische Schwierigkeiten

Derzeit unterstützen Browser nicht das Auflisten aller Optionen in einer Dropdown-Liste durch Suchen im Code; dies ist nur per Mausklick möglich.

Nachdem ich online nach einigen Informationen gesucht hatte, kam ich auf die beste Möglichkeit, damit umzugehen.

Verwenden Sie dazu das Größenattribut der Auswahl und das Positionsattribut des Boxlayouts. Der spezifische Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<td align="rechts">
Zahlungsarten:
</td>
<td style="padding:0px;vertical-align:top;">
<!-- Sie müssen die Auswahl mit einem Div umschließen, sonst ist sie nicht mit FF kompatibel-->
<span style="color:#ff0000"><div style="position:relative;padding:1px;">
</span> <select id="Zahlungstyp" name="Zahlungstyp" style="position:absolute;" onfocus="expand(this)" onblur="unexpand(this)">
<option>Rechte Maustaste</option>
<option>US-Dollar</option>
<option>Kreditkarte</option>
<option>Hongkong-Dollar</option>
<option>Hongkong-Dollar</option>
</Auswählen>
<span style="color:#ff0000"></div>
</span></td>

Die Expand- und Unexpand-Methoden sind beide einfach:

Code kopieren
Der Code lautet wie folgt:

Funktion expand(obj){
$(obj).attr("Größe","10");
}
Funktion unexpand(obj){
$(obj).attr("Größe","1");
}

Legen Sie die Auswahlposition auf absolut fest, sodass das DOM-Flusslayout nicht beeinträchtigt wird. Legen Sie dann die Position des Containers auf „relativ“ fest, sodass die Auswahl entsprechend ihrem Container positioniert wird.

Hierbei ist zu beachten, dass als Container der Auswahl im Tabellenelement div verwendet werden muss, da die Einstellung „position:relative“ bei tabellenbezogenen Elementen gemäß dem CSS-Standard des W3C nicht definiert ist und daher das Auswahlelement unter ff direkt entsprechend dem Body-Element positioniert wird.

Quellen:

http://www.php-insite.com/autoexpand_select.html Den Quellcode der Seite direkt anzeigen
http://bbs.csdn.net/topics/330158935 Beachten Sie die Antwort von lingshuo1993

<<:  Zusammenfassung verschiedener Methoden zur MySQL-Datenwiederherstellung

>>:  Verwenden von CSS3 zum Erzielen von Übergangs- und Animationseffekten

Artikel empfehlen

CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Dieses Mal schauen wir uns ein Navigationsleisten...

Nützliche Codes zum Erstellen von Webseiten

<br />Wie kann ich die Bildlaufleiste auf de...

Zusammenfassung gängiger MySQL-DDL-Operationen

Bibliotheksverwaltung Erstellen einer Bibliothek ...

Warum wirkt sich die Verwendung von Limits in MySQL auf die Leistung aus?

Lassen Sie mich zunächst die MySQL-Version erklär...

Detaillierte Erläuterung der Verwendung des MySQL-Auswahl-Cache-Mechanismus

Der MySQL-Abfragecache ist standardmäßig aktivier...

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

VMware vSphere ist die branchenführende und zuver...

MySQL Flush-List und Flushing-Mechanismus für Dirty Pages

1. Überprüfung Der Pufferpool wird nach dem Start...

Detaillierte Erklärung der Vue-Optionen

Inhaltsverzeichnis 1. Was sind Optionen? 2. Welch...

Best Practices-Handbuch zum Speichern von Daten in MySQL

Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...

Zusammenfassung ungewöhnlicher Operatoren und Operatoren in js

Zusammenfassung gängiger Operatoren und Operatore...

URL-Darstellung in HTML-Webseiten

In HTML werden gängige URLs auf verschiedene Arten...