HTMLOptionElement.form — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLOptionElement.form

Beschreibung

Die schreibgeschützte Eigenschaft form eines HTMLOptionElement verweist auf das Formular, zu dem die Option über ihr <select>-Element gehört. Die Option hat selbst keine Formularzugehörigkeit. Sie übernimmt einfach den Wert von select.form.

Das klappt nur, wenn die Option ein direktes Kind eines <select> ist oder in einer <optgroup> steckt, die direkt in einem <select> liegt. In allen anderen Fällen ist der Wert null. Dazu gehören Optionen in einer <datalist>, frisch mit new Option() erzeugte Optionen, die noch nicht eingefügt wurden, und ein <select> außerhalb jedes Formulars.

Weil der Wert von select.form kommt, wird auch das form-Attribut des <select> beachtet (z. B. <select form="bestellung">). Liegt das Select außerhalb des Formulars, ist es ihm aber über die ID zugeordnet, liefert option.form trotzdem dieses Formular.

Praktisch ist die Eigenschaft in Event-Handlern und bei Event-Delegation: Von einer ausgewählten Option kommt man direkt zum Formular, etwa um andere Felder zu lesen, das Formular zu prüfen oder es mit requestSubmit() abzuschicken.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das Formular, zu dem das <select> der Option gehört, oder null, wenn die Option nicht in einem <select> steckt oder dieses keinem Formular zugeordnet ist.

Beispiele

Formular einer Option ermitteln

// HTML:
// <form id="bestellung">
//   <select name="groesse">
//     <option value="s">S</option>
//     <option value="m" selected>M</option>
//   </select>
// </form>

const option = document.querySelector('option[value="m"]');
console.log(option.form?.id);
console.log(option.form === option.parentElement.form);

bestellung true

Fälle, in denen form null ist

// Neue Option, noch nicht eingefügt
const neu = new Option('Rot', 'rot');
console.log(neu.form);

// Option in einer <datalist>
const datalist = document.createElement('datalist');
const form = document.createElement('form');
form.append(datalist);
const dlOption = new Option('Berlin');
datalist.append(dlOption);
console.log(dlOption.form);

// Nach dem Einfügen in ein <select> innerhalb des Formulars
const select = document.createElement('select');
form.append(select);
select.add(neu);
console.log(neu.form === form);

null null true

Zuordnung über das form-Attribut des select

// HTML:
// <form id="filter"></form>
// <select form="filter" name="sortierung">
//   <option value="preis">Preis</option>
// </select>

const option = document.querySelector('option[value="preis"]');
console.log(option.form?.id);

filter

Formular bei Auswahl automatisch absenden

document.addEventListener('change', (event) => {
  const select = event.target;
  if (!(select instanceof HTMLSelectElement)) return;

  const gewaehlt = select.selectedOptions[0];
  const form = gewaehlt?.form;
  if (form && form.dataset.autoSubmit === 'true') {
    // requestSubmit() löst die Validierung und das submit-Event aus
    form.requestSubmit();
  }
});

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie option.form = otherForm wird ignoriert. Im Strict Mode wirft sie einen TypeError. Um die Zuordnung zu ändern, setzt man das form-Attribut am <select> (select.setAttribute('form', 'id')).
<datalist>-Optionen liefern immer null, selbst wenn die Datalist in einem Formular liegt.
Verschachtelung: Laut Spezifikation zählen nur Optionen, die direkt im <select> oder in einer direkt darin liegenden <optgroup> stehen. Bei tieferer Verschachtelung (z. B. über das neue anpassbare Select mit appearance: base-select) kann sich das Verhalten je nach Browser unterscheiden.
Der Wert wird live ermittelt: Verschiebt man die Option oder das Select in ein anderes Formular, ändert sich form sofort.
Die Eigenschaft wird von allen Browsern unterstützt, auch von alten Versionen.

Siehe auch

HTMLButtonElement.formTarget HTMLOptionElement.text HTMLOptionElement.index HTMLOptionElement.label HTMLOptionElement.value