Es ist derzeit eine bessere Möglichkeit, bei der Produktion von selected/focused_HTML/Xhtml_Webseiten alle Optionen aufzulisten

Während der Entwicklung bin ich auf eine solche Nachfragesituation gestoßen, daher habe ich sie zur späteren Bezugnahme aufgezeichnet

Anforderungshintergrund

Verwenden Sie die Tastenkombination auf der Seite, um die Zahlungsmethode zu finden Klicken Sie auf das Auswahlfeld (eine Dropdown-Liste) und treffen Sie eine Auswahl.

Technische Schwierigkeiten

Derzeit unterstützen Browser nicht die Positionierung der Dropdown-Liste durch Code, um alle Optionen darunter aufzulisten. Sie kann nur mit der Maus angeklickt werden .

Nachdem ich im Internet nach Informationen gesucht habe, habe ich einen besseren Weg gefunden, damit umzugehen.

Verwenden Sie das Größenattribut von select und das Positionsattribut des Box-Layouts, um es zu implementieren . Der spezifische Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Zahlungsmethode:
> nicht kompatibel :relative;padding:1px;">

RMB< ;/option>
USD
Kreditkarte

HKD


Die Methoden zum Erweitern und Aufheben der Erweiterung sind beide einfach:

Kopieren Sie den Code


Der Code lautet wie folgt:

function expand(obj){ $(obj).attr("size","10"); >} function unexpand(obj){ $(obj ).attr("size","1");

}

Setzen Sie die Position von select auf absolut damit es das Flusslayout von dom nicht beeinträchtigt. Setzen Sie dann die Position seines Containers auf relativ, sodass die Auswahl entsprechend ihrem Container positioniert wird.

Hier ist zu beachten, dass div als Auswahlcontainer im Tabellenelement verwendet werden muss, da gemäß dem CSS-Standard von w3c die Einstellung von position:relative für tabellenbezogene Elemente undefiniert ist Wählen Sie ein Element unter ff aus und positionieren Sie es direkt basierend auf dem Körperelement.

Referenzinformationen:

http://www.php-insite.com/autoexpand_select.html Sehen Sie sich den Quellcode der Seite direkt an

http://bbs.csdn.net/topics /330158935 Achten Sie auf die Antwort von lingshuo1993