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

SELF-Forum

Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

Hans-Maier-eV (Versionen)
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

    pl
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@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
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

      Hans-Maier-eV
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

        pl
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

      Hans-Maier-eV
      – Informationen zu den Bewertungsregeln

      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ß

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

        Gunnar Bittersmann Homepage des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie kann ich meine wiederholenden Dropdown Listen vereinfachen?

          Hans-Maier-eV (Versionen)
          – Informationen zu den Bewertungsregeln

          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>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln