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.

<script> JavaScript

CSS - Fehleingaben in Formularen farbig hervorheben

PHP - Exif-Infos eines JPG-Bildes auslesen

JavaScript - Textteil auswählen

MySQL - Mehrere Spalten einer Tabelle sortieren

Schlagzeile entscheidet
Maßgeblich beeinflusst wird dieser erste Eindruck durch die auf Ihrer Website verwendeten Headlines (Schlagzeilen): Wenn Sie Teaser, also Anreißer-Texte, verwenden, dann entscheidet die verwendete Headline oft, ob man zum Artikel weiterklickt. Die über einer Seite platzierte Haupt-Headline ist ein wichtiges Kriterium für die Entscheidung, ob weitergelesen wird oder nicht. Auch die im Text verwendeten Subheadlines spielen dabei eine große Rolle.