JavaScript - Optionen in der Auswahlliste je nach Alter der Person anzeigen

Die Altersgrenze liegt in diesem Beispiel bei 14 Jahren.


<style>

  
select#options {
    
width135px;
  }
</
style>

<
p>
  <
label>Alter:<br>
  <
input type="number" name="age" id="age" required></label>
</
p>

<
p>
  <
label>Auswahl:<br>
 <
select name="options" id="options" size="5" required></select></label>
</
p>

<
script>
 const 
opt = ["Option 1""Option 2""Option 3""Option 4""Option 5"];

  
document.querySelector("#age").addEventListener("input", (e) => {

    
document.querySelector("#options").innerHTML "";
    
let age e.target.value;
    
let nrs 0;

    if (
age <= 14) { // Altersgrenze
      
nrs 2;
    } else {
      
nrs 4;
    }

    for (
let i 0<= nrsi++) {
      
document.querySelector("#options").options[i] = new Option(opt[i]);
    }

  });
</
script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<td> Tabellenspalte

CSS - Listenelemente einfärben

PHP - Letztes Verzeichnis aus einer URL ermitteln

JavaScript - Radiobutton mit Auswahl-Hinweis

MySQL - Das Alter von Personen ermitteln

Leuchtende Navigation
Lassen Sie ihre Navigation dadurch leuchten, dass jeder sich zurechtfindet, Einer der wichtigsten Punkte ist dem Besucher den Weg zu seinen Informationen so schnell und einfach wie nur möglich zu gestalten. Um effizient arbeiten zu können, hilft es oftmals, sich in die Lage des Besuchers zu versetzen, denn der einzige Weg eine optimale Navigation für Ihre Webseite zu planen und zu entwerfen ist genauso zu denken, wie es ein typischer Besucher tun würde.