Hans-Maier-eV: Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

Hallo zusammen

ich bin Anfänger und bräuchte mal Hilfe.

Ich bastele grad an einem kleinen Projekt, in dem sich Dropdown listen vielfach wiederholen. Es werden 32 listen, mit je 10 Auswahlmöglichkeiten (immer die selbe Liste).

Wenn ich das klassisch mache wird der Code unendlich lang. Kann man die liste einmal definieren und dann immer wieder aufrufen?

Ich danke schon mal für jeglichen Rat!

Beispiel code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <label for="p1-t1"> 
      <i>Taste 1</i> 
      <select name="p1-t1" id="p1-t1" size="1">
        <option value="Raum1">1</option>
        <option value="Raum2">2</option>
        <option value="Raum3">3</option>
        <option value="Raum4">4</option>
        <option value="Raum5">5</option>
        <option value="Raum6">6</option>
        <option value="Raum7">7</option>
        <option value="Raum8">8</option>
        <option value="Raum9">9</option>
        <option value="Raum10">10</option>
      </select>
    </label>
    <p>
    <label for="p1-t2"> 
      <i>Taste 2</i> 
      <select name="p1-t2" id="p1-t2" size="1">
        <option value="Raum1">1</option>
        <option value="Raum2">2</option>
        <option value="Raum3">3</option>
        <option value="Raum4">4</option>
        <option value="Raum5">5</option>
        <option value="Raum6">6</option>
        <option value="Raum7">7</option>
        <option value="Raum8">8</option>
        <option value="Raum9">9</option>
        <option value="Raum10">10</option>
      </select>
    </label>
    <p>
    <label for="p1-t3"> 
      <i>Taste 3</i> 
      <select name="p1-t3" id="p1-t3" size="1">
        <option value="Raum1">1</option>
        <option value="Raum2">2</option>
        <option value="Raum3">3</option>
        <option value="Raum4">4</option>
        <option value="Raum5">5</option>
        <option value="Raum6">6</option>
        <option value="Raum7">7</option>
        <option value="Raum8">8</option>
        <option value="Raum9">9</option>
        <option value="Raum10">10</option>
      </select>
    </label>
    <p>
    <label for="p1-t4"> 
      <i>Taste 4</i> 
      <select name="p1-t4" id="p1-t4" size="1">
        <option value="Raum1">1</option>
        <option value="Raum2">2</option>
        <option value="Raum3">3</option>
        <option value="Raum4">4</option>
        <option value="Raum5">5</option>
        <option value="Raum6">6</option>
        <option value="Raum7">7</option>
        <option value="Raum8">8</option>
        <option value="Raum9">9</option>
        <option value="Raum10">10</option>
      </select>
    </label>
</body>
  1. Hallo Hans-Maier-eV,

    Wenn ich das klassisch mache wird der Code unendlich lang. Kann man die liste einmal definieren und dann immer wieder aufrufen?

    mit reinem HTML geht das nicht. Es gibt serverseitige Methoden, wie zum Beispiel include, oder clientseitige, wie die Verwendung des template-Elements.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. PHP: htmltemplate.php

    Perl: HTML::Template

    C: htmltemplate.c

    Das Template ist für o.g. Engines überall gleich, egal ob es mit Perl, PHP oder mit C gerendert wird. Das Template für eine Auswahlliste sieht z.B. so aus:

    <TMPL_LOOP NAME="raums">
      <option value="<TMPL_VAR NAME='raum'>"> <TMPL_VAR NAME="raum"> </option>
    </TMPL_LOOP>
    

    MFG

    1. @@pl

      <TMPL_LOOP NAME="raums">

      raums? Was für ein herrliches Denglisch. Nicht.

      Naming things is hard.

      LLAP 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
    2. Hallo,

      Danke für die info, hab grad mal versucht mir was zu basteln aus dem Beispiel "template-Elements". Bekomme es aber leider nicht hin, bin da leider nur rudimentär unter Wegs.

      Das Beispiel bezieht sich auf eine Tabelle, die Ausgefüllt wird.

      @pl : hast du ein Beispiel für select/ option?

      Gruß

      und vielen Danke

      1. problematische Seite

        hi,

        @pl : hast du ein Beispiel für select/ option?

        Ich habe ein Beispiel für mustache.js mit Loop Ein Select wir genauso gemacht.

        MFG

  3. @@Hans-Maier-eV

    Es werden 32 listen, mit je 10 Auswahlmöglichkeiten (immer die selbe Liste).

        <label for="p1-t1"> 
          <i>Taste 1</i> 
          <select name="p1-t1" id="p1-t1" size="1">
            <option value="Raum1">1</option>
            <option value="Raum2">2</option><option value="Raum10">10</option>
          </select>
        </label>
    

    Das sieht nach Quälerei für den Nutzer aus. Um einen Wert einer Dropdown-Liste zu ändern, sind zwei Interaktionen notwendig: Liste öffnen, Item auswählen. Wenn man das 32 Mal machen muss, ist das nervig.

    Oft sind Radiobuttons die bessere Alternative – one click.

    <fieldset>
      <legend>Taste 1</legend>
      <label><input type="radio" name="p1-t1" value="Raum1"/>1</label>
      <label><input type="radio" name="p1-t1" value="Raum2"/>2</label><label><input type="radio" name="p1-t1" value="Raum10"/>10</label>
    </fieldset>
    

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Hallo.

      ja es ist nötig, da mehrfach aus mahl möglich sein muss.

      Sprich Taste 1 kann das selbe tun wie zum Beispiel Taste 23.

      Gruß

      1. @@Hans-Maier-eV

        Hallo.

        ja es ist nötig, da mehrfach aus mahl möglich sein muss.

        Na dann eben Checkboxen statt Radiobuttons.

        <select multiple> ist in No-Go; es sei denn, die Anwendung hat eine sehr begrenzte Nutzerschaft, die erstens wissen, dass Mehrfachauswahl vorgesehen ist, und zweitens wissen, wie man Mehrfachauswahl im Browser machen kann.

        Aber auch dann sind Checkboxen wohl die bessere Alternative.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. Das ganze soll am ende eine Text Datei ausspucken mit den ausgewählten Räumen, diese werden dann in einem Arduino eingelesen und dieser Schaltet dann dem entsprechend und Zeigt die Namen auf LED Displays.

          Damit es übersichtlicher ist wollte ich das so optisch darstellen wie die Tastenfelder in real aussehen.

          Gruß

          (ich bin generell nicht wirklich gut im umsetzen, aber Ideen hab ich.)

          Hier mal zu Ansicht was es im Groben tun soll:

          <!DOCTYPE html>
          <html>
           <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Setup v0.1</title>
            
            <style type="text/css" media="screen">
              body {
              font-family:verdana, sans-serif; 
              color:#ddd; 
              background:#6a6a6a; 
              padding:20px; 
              text-align:center;
              }
               .taste-select {
              -moz-appearance: none;
              -webkit-appearance: none;
              background:#0a0a0a;
              appearance: none;
              border: none;
              border-radius: 3px;
              padding-left:11px;
              box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
              color: red;
              cursor: pointer;
              font-family: courier, "courier new", monospace;
              font-size: 18px;
              height: 28px;
              width: 85px;
              }
              
               .taste td {
              background:#cccccc;
              border: none;
              border-radius: 3px;
              padding:10px;
              box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
              color: black;
              font-family: courier, "courier new", monospace;
              font-size: 32px;
              text-align:center;
              height: 64px;
              width: 64px;
              }
              
          	.accordion {
            	background-color: #333;
            	color: #cc3333;
            	font-weight:bold;
            	cursor: pointer;
            	margin-left:0px;
            	padding: 18px;
            	width: 100%;
            	border: none;
            	text-align: left;
            	outline: none;
           	font-size: 15px;
            	transition: 0.4s;
          	}
          
          	.active, .accordion:hover {
            	background-color: #666;
          	}
          
          	.panel {
            	padding: 0 18px;
            	background-color: #444;
            	max-height: 0;
            	overflow: hidden;
            	transition: max-height 0.2s ease-out;
          	}
              
            </style>
          
           </head>
          
          <body>
          	          
              <button class="accordion">Port 1</button>
              <div class="panel">
              <br>  
          
          <!-- **** Tasten 1 **** -->   
              
              <table cellspacing="10">
              <tr>
              <td>
                <label for="p1-t1">  
                <select name="p1-t1" id="p1-t1" size="1" class="taste-select">
                  <b><option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option></b>
                </select>
                </label>
              </td>
              <td>
                <label for="p1-t2">  
                <select name="p1-t2" id="p1-t2" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
              </td>
              <td>
              <label for="p1-t3">  
                <select name="p1-t3" id="p1-t3" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
               </td>
                <td>
                  <label for="p1-t4">  
                   <select name="p1-t4" id="p1-t4" size="1" class="taste-select">
                   <option value="Raum1">Raum 1</option>
                   <option value="Raum2">Raum 2</option>
                   <option value="Raum3">Raum 3</option>
                   <option value="Raum4">Raum 4</option>
                   <option value="Raum5">Raum 5</option>
                   </select>
                  </label>
                </td>
              </tr>
              <tr class="taste">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              </tr>
              </table>
          
          <!-- **** Ende Tasten ***** -->
          
              </div>
              <br>	          
              <button class="accordion">Port 2</button>
              <div class="panel">
              <br>
          
          <!-- **** Tasten 2 **** -->   
              <div>
              <table cellspacing="10">
              <tr>
              <td>
                <label for="p2-t1">  
                <select name="p2-t1" id="p2-t1" size="1" class="taste-select">
                  <b><option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option></b>
                </select>
                </label>
              </td>
              <td>
                <label for="p2-t2">  
                <select name="p2-t2" id="p2-t2" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
              </td>
              <td>
              <label for="p2-t3">  
                <select name="p2-t3" id="p2-t3" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
               </td>
                <td>
                  <label for="p2-t4">  
                   <select name="p2-t4" id="p2-t4" size="1" class="taste-select">
                   <option value="Raum1">Raum 1</option>
                   <option value="Raum2">Raum 2</option>
                   <option value="Raum3">Raum 3</option>
                   <option value="Raum4">Raum 4</option>
                   <option value="Raum5">Raum 5</option>
                   </select>
                  </label>
                </td>
              </tr>
              <tr class="taste">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              </tr>
              </table>
          
          <!-- **** Ende Tasten ***** -->
              </div>
              </div>
              <br>	          
              <button class="accordion">Port 3</button>
              <div class="panel">
              <br>
          
          <!-- **** Tasten 3 **** -->   
              
              <table cellspacing="10">
              <tr>
              <td>
                <label for="p3-t1">  
                <select name="p3-t1" id="p3-t1" size="1" class="taste-select">
                  <b><option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option></b>
                </select>
                </label>
              </td>
              <td>
                <label for="p3-t2">  
                <select name="p3-t2" id="p3-t2" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
              </td>
              <td>
              <label for="p3-t3">  
                <select name="p3-t3" id="p3-t3" size="1" class="taste-select">
                  <option value="Raum1">Raum 1</option>
                  <option value="Raum2">Raum 2</option>
                  <option value="Raum3">Raum 3</option>
                  <option value="Raum4">Raum 4</option>
                  <option value="Raum5">Raum 5</option>
                </select>
                </label>
               </td>
                <td>
                  <label for="p3-t4">  
                   <select name="p3-t4" id="p3-t4" size="1" class="taste-select">
                   <option value="Raum1">Raum 1</option>
                   <option value="Raum2">Raum 2</option>
                   <option value="Raum3">Raum 3</option>
                   <option value="Raum4">Raum 4</option>
                   <option value="Raum5">Raum 5</option>
                   </select>
                  </label>
                </td>
              </tr>
              <tr class="taste">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              </tr>
              </table>
          
          <!-- **** Ende Tasten ***** -->
          
              </div>
              
              <br>	          
              <button class="accordion">Port 4....32</button>
              <div class="panel">
              <br>
              
               <script>
                var acc = document.getElementsByClassName("accordion");
                var i;
          
                for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
                } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
                } 
                });
                }
               </script>
          </body>
          </html>