Schlagwort: createElement

Dynamisch Optionen zu einer HTML select Box hinzufügen

Wer eine select-Box dynamisch mit Optionen befüllen möchte, der hat zwei Wege. Der Kürzere führt über das Schlüsselwort new:

1
2
3
4
5
6
7
8
9
10
11

<body>
  <select id="selectElement" size="5"></select>
  <script>
    var selectElement = document.getElementById('selectElement');
 
    for(var i=0;i<5;i++){
      var option = new Option('Text '+i, i);
      selectElement.options[i] = option;
    }
  </script>
</body>

Der klassische Weg führt über die kompatible createElement-Methode.

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
  <select id="selectElement" size="5"></select>
  <script>
    var selectElement = document.getElementById('selectElement');
 
    for(var i=0;i<5;i++){
      var option = document.createElement('option');
      option.text = 'Text '+i;
      option.value = i;
      selectElement.options[i] = option;
    }
  </script>
</body>

Das Ergebnis ist Folgendes:

<body>
  <select id="selectElement" size="5">
    <option value="0">Text 0</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
    <option value="4">Text 4</option>
  </select>
</body>