select tag weniger option anzeigen

Laemmi · 2. April 2019

Hallo zusammen,

habe mal eine Frage zum select-Tag:

Ist es möglich beim anklicken des Tags weniger Ergebnisse anzuzeigen?

Bei Firefox werden zum Beispiel 21 option-Tags angezeigt, bevor der vertikale Scroll anzeigt dass weitere Tags vorhanden sind.

Ich hätte den Scroll gerne bereits ab z.B. 10 option-Tags, finde aber leider kein Attribut mit dem man dies vorgeben kann, und auch Dr. Google konnte mir da nicht wirklich helfen.

Beispiel:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<select>
<option>Zeile1</option>
<option>Zeile2</option>
<option>Zeile3</option>
<option>Zeile4</option>
<option>Zeile5</option>
<option>Zeile6</option>
<option>Zeile7</option>
<option>Zeile8</option>
<option>Zeile9</option>
<option>Zeile10</option>
<option>Zeile11</option>
<option>Zeile13</option>
<option>Zeile14</option>
<option>Zeile15</option>
<option>Zeile16</option>
<option>Zeile17</option>
<option>Zeile18</option>
<option>Zeile19</option>
<option>Zeile20</option>
<option>Zeile21</option>
<option>Zeile22</option>
<option>Zeile23</option>
<option>Zeile24</option>
<option>Zeile25</option>
<option>Zeile26</option>

</select>


</body>
</html>

Alles anzeigen

Wenn es nicht geht, oder größerer Aufwand wäre auch ok, ist mehr eine generelle Frage.

Danke schon einmal im Voraus...

Sailor · 2. April 2019

Dr. Google 1. Ergebnis...

https://wiki.selfhtml.org/wiki/HTML/Formulare/Auswahllisten

Laemmi · 3. April 2019

Hallo Sailer,

danke, aber das kenne ich schon, ist aber nicht dass was ich meinte.

Es soll schon im normalen Zustand nur die eigentlich Auswahl stehen bleiben, aber wenn man den Select Tag anklickt soll die Liste der gezeigten Optionen nicht so lang sein, sondern nur z.B. 5 auf den ersten Blick anzeigen, der Rest dann über die Scrollfunction erreichbar sein.

Also im Beispiel nach dem Anklicken des Select Tags nur Zeile1 - Zeile5 anzeigen, nicht wie bisher Zeile1 - Zeile21 (Firefox).

Sempervivum · 3. April 2019

Versuche, ob dies das ist, was Du dir vorstellst:

Code

    <select id="dynselect" size="1">
        <option>Zeile1</option>
        <option>Zeile2</option>
        <option>Zeile3</option>
        <option>Zeile4</option>
        <option>Zeile5</option>
        <option>Zeile6</option>
        <option>Zeile7</option>
        <option>Zeile8</option>
        <option>Zeile9</option>
        <option>Zeile10</option>
        <option>Zeile11</option>
        <option>Zeile13</option>
        <option>Zeile14</option>
        <option>Zeile15</option>
        <option>Zeile16</option>
        <option>Zeile17</option>
        <option>Zeile18</option>
        <option>Zeile19</option>
        <option>Zeile20</option>
        <option>Zeile21</option>
        <option>Zeile22</option>
        <option>Zeile23</option>
        <option>Zeile24</option>
        <option>Zeile25</option>
        <option>Zeile26</option>
    </select>
    <script>
        document.getElementById("dynselect").addEventListener("mousedown", function () {
            this.size = "10";
        });
        var opts = document.querySelectorAll("#dynselect option");
        for (var i = 0; i < opts.length; i++) {
            opts[i].addEventListener("mousedown", function () {
                document.getElementById("dynselect").size = "1";
                event.stopPropagation();
            });
        }
    </script>

Alles anzeigen

Laemmi · 3. April 2019

Hallo Sempervivum,

leider auch nicht, dann bekomme ich nach dem event Mousedown auch einfach eine Mulitline mit 10 angezeigten Optionen, und die size des select bleibt dann bei 10.

Ok, wenn es doch umständlicher ist passt das auch so, hatte gedacht es gibt vielleicht ein Attribut für das select Tag dass ich einfach nicht gefunden habe.

Aber danke euch für die Hilfe.

Sailor · 3. April 2019

Versuche es mal hiermit... einfaches JS mit einem 'onclick' Event

Code

<form>
  <p>Eine Auswahlliste:</p>
    <select id="myForm" name="meine_auswahl" size="1" onclick="showSelect()" onchange="alert(this.value)">
      <option value="1">Auswahl 1</option>
      <option value="2">Auswahl 2</option>
      <option value="3">Auswahl 3</option>
      <option value="4">Auswahl 4</option>
      <option value="5">Auswahl 5</option>
      <option value="6">Auswahl 6</option>
      <option value="7">Auswahl 7</option>
      <option value="8">Auswahl 8</option>
      <option value="9">Auswahl 9</option>
    </select>

</form>
<script>
function showSelect() {
   var auswahl = document.getElementById("myForm");
   if (auswahl.size == "1") {
      auswahl.size = "5";
      }
   else {
      auswahl.size = "1";
      }
   }
</script>

Alles anzeigen

Laemmi · 3. April 2019

Hallo Sailor,

fast.

die darunter stehenden Bereiche werden dann aber trotzdem verschoben, da sich die size ja ändert wenn ich darauf klicke.

Normalerweise bei einem select Tag sind die options ja über den darunter liegenden Bereichen dargestellt, verdecken diese also aber verdrängen sie nicht.

Also leider auch nicht richtig.

Wie gesagt, wenn es zu großer Aufwand oder zu speziell ist passt das auch so.

Danke dir...

Sailor · 3. April 2019

Du könntest dein <select> mit 'style="position: absolute;" ' so formatieren, dass es die nachfolgenden Elemente überdeckt.

Aber dann musst du darauf achten, dass es schon in der Normalansicht richtig positioniert ist, denn mit 'absolute' ist das Element aus dem aus dem Textfluss herausgenommen und Nachfolgende Elemente positionieren sich dann nicht richtig - so als wäre das <select> nicht da.

Laemmi · 3. April 2019

Ja, das würde gehen.

Die unteren Elemente benötigen dann halt ein festen Abstand nach oben, da sie ja ansonsten vom select-Tag bereits in der Normalansicht verdeckt werden.

Also prinzipiell ja, würde sagen das Thema ist gelöst, werde es aber nicht so umsetzen, da es dadurch wiederum Einschränkungen gibt die den Nutzen nicht aufwiegen.

Trotzdem schönen Dank ihr beiden für die Ideen und Vorschläge.

select tag weniger option anzeigen

Jetzt mitmachen!

Teilen