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.

<fieldset> Formularelemente gruppieren

CSS - Internes Sprungziel hervorheben

PHP - Lotto (6 aus 49)

JavaScript - Ein farbig blinkender Text

MySQL - Summe einer Spalte ermitteln

Deutsche Namen!
Vergeben Sie für die Links auf Ihrer Seite "Deutsche Namen". Nicht jeder kennt "Feedback", "Offline", "Bookmark", "Update" oder "Download".
Wussten Sie, dass die meisten deutschsprachigen Besucher einer Homepage die Linkbezeichnung "Startseite" bevorzugen, am häufigsten jedoch "Home" verwendet wird?