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

Beitrag lesen

SELF-Forum

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