Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung

Heute ist mir ein Problem aufgefallen: Der Inhalt des Dropdown-Felds in der Abfrageleiste war zu lang, sodass ein Teil davon abgedeckt war.

Ich habe ein paar Informationen nachgeschlagen, bei manchen wurde gesagt, man solle eine Funktionssteuerung verwenden, bei manchen eine Ereignissteuerung, manches habe ich nicht verstanden und manche waren zu kompliziert in der Umsetzung. Später fragte ich einen Kollegen, ob es ein paar einfache Methoden gäbe. Er sagte mir, ich solle das Titelattribut in die Option einfügen. Also probierte ich seine Methode aus und fand schließlich heraus, dass diese Methode funktioniert. Deshalb möchte ich es aufschreiben, damit ich es nicht vergesse.

1. Die spezifischen Beispiele sind wie folgt

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Lösung für die unvollständige Anzeige des Inhalts ausgewählter Dropdown-Felder in HTML</title>
<style type="text/css">
#Bereichsoption{
Breite: 140px;
}
</Stil>
</Kopf>
<body style="Breite: 80 %; Höhe: 100px; Textausrichtung: Mitte;">
<div id="div_auswahl">
<label for="area">Buchstaben:</label>
<select id="Bereich" name="Bereich" style="width:150px;">
<option value="0">Alle</option>
<option value="1" title="AAAAAAAAAAAAAAAAAAAAAAAAAAAA">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBB">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCC">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEE">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFF">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHH">HHHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIII">IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</Auswählen>
</div>
</body>
</html>

2. Beispielergebnisse

3. Dynamische Daten

Code kopieren

Der Code lautet wie folgt:

<div id="div_auswahl">
<label for="area">Provinz:</label>
<select id="Bereich" name="Bereich" style="width:150px;">
<option value="0">Alle</option>
<c:forEach Elemente="${Liste}" var="Bereich">
<option value="${area.areaCode}" title="${area.areaName}">${area.areaName}</option>
</c:fürJeden>
</Auswählen>
</div>

<<: Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

>>: Implementierung des MySQL Shell import_table-Datenimports

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

Detaillierte Erläuterung der stillen Anmeldung beim WeChat-Applet und der Aufrechterhaltung des benutzerdefinierten Anmeldestatus

Artikel

Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen

Beispielcode zum automatischen Umbrechen des Pre-Tags

Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen

Lombok-Implementierung JSR-269

JDBC-Idee: MySQL importieren, um Java-JAR-Paket zu verbinden (Mac)

HTML-Tabellen-Tag-Tutorial (35): spaltenübergreifendes Attribut COLSPAN

Lösung für den Fehler, dass IE6 select nicht durch div abgedeckt werden kann

JSONP-domänenübergreifende Simulation der Baidu-Suche

Detaillierte Erläuterung der stillen Anmeldung beim WeChat-Applet und der Aufrechterhaltung des benutzerdefinierten Anmeldestatus

Artikel empfehlen

Detailliertes Installationstutorial für die MySQL 5.6.36-Version für Windows x64

Das Problem, dass bei der Installation von RabbitMQ in Docker die Verwaltungsseite nicht aufgerufen werden kann

Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors

Legen Sie ein Symbol für die Website fest, das ganz links auf der Registerkarte des Browsers angezeigt werden soll

Beispiel einer langsamen MySQL-Abfrage

Zusammenfassung der Methoden zum Suchen und Löschen doppelter Daten in MySQL-Tabellen

MySQL-Daemon konnte nicht gestartet werden – Fehlerlösung

MySQL 8.0.26-Installation und vereinfachtes Tutorial (das umfassendste im Internet)

Vue implementiert die vollständige Auswahlfunktion

Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen

Detaillierte Analyse von Absturzfällen bei MySQL-Instanzen

Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows

Detaillierte Erklärung der HTML-Elementhöhe, OffsetHeight, ClientHeight, ScrollTop usw.

Nginx-Konfiguration 80 Portzugriff 8080 und Analyse der Projektnamenadressenmethode

Detaillierte Schritte zum Erstellen eines NFS-Dateifreigabeservers unter Linux