HTMLSelectElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.name

Beschreibung

Die Eigenschaft name des Interfaces HTMLSelectElement spiegelt das HTML-Attribut name eines <select>-Elements wider. Der Name ist der Schlüssel, unter dem der ausgewählte Wert (bzw. bei multiple alle ausgewählten Werte) beim Absenden eines Formulars übermittelt wird, z. B. land=de.

Die Eigenschaft ist lesbar und schreibbar. Beim Setzen wird das Attribut name im DOM direkt geändert. Fehlt das Attribut, wird ein leerer String "" zurückgegeben.

Gebraucht wird name vor allem beim dynamischen Aufbau von Formularen, beim Auslesen über FormData sowie beim Zugriff über form.elements[name]. Ein <select> ohne Namen wird beim Absenden nicht übermittelt und landet auch nicht in einem FormData-Objekt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des name-Attributs, oder "", wenn es fehlt. Beim Zuweisen wird der Wert in einen String umgewandelt und als Attribut gesetzt.

Beispiele

Namen auslesen und ändern

// HTML: <select id="land" name="country"><option value="de">Deutschland</option></select>
const select = document.getElementById('land');
console.log(select.name);

select.name = 'land';
console.log(select.getAttribute('name'));

country land

Wert über FormData auslesen

// HTML:
// <form id="bestellung">
//   <select name="groesse">
//     <option value="s">S</option>
//     <option value="m" selected>M</option>
//   </select>
// </form>
const form = document.getElementById('bestellung');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const daten = new FormData(form);
  const select = form.querySelector('select');
  console.log(`${select.name} = ${daten.get(select.name)}`);
});
form.requestSubmit();

groesse = m

Select dynamisch erzeugen und benennen

const form = document.querySelector('form');
const select = document.createElement('select');
select.name = 'zahlungsart';

for (const [value, label] of [['paypal', 'PayPal'], ['rechnung', 'Rechnung']]) {
  select.add(new Option(label, value));
}
form.append(select);

// Zugriff über die elements-Sammlung des Formulars
console.log(form.elements.zahlungsart === select);
console.log(new FormData(form).get('zahlungsart'));

true paypal

// Wichtig · Fallstricke

Kein Name, keine Übermittlung: Ohne name wird das <select> weder beim Absenden gesendet noch in FormData aufgenommen. Das gilt auch für deaktivierte Elements (disabled).
Mehrfachauswahl: Bei multiple wird der Name für jeden ausgewählten Wert wiederholt. Nutze formData.getAll(name) statt get(). Für PHP-Backends ist oft name="tags[]" üblich.
Kollisionen mit Formular-Eigenschaften: Namen wie submit, action oder reset überdecken über form.elements bzw. benannten Zugriff (form.submit) die gleichnamigen Methoden und Eigenschaften des Formulars. Solche Namen solltest du meiden.
name ist nicht dasselbe wie id: Mehrere Elemente dürfen denselben Namen tragen, dann liefert form.elements[name] eine RadioNodeList.
Die Eigenschaft wird von allen Browsern unterstützt.

Siehe auch

HTMLMapElement.name HTMLSelectElement.size HTMLSelectElement.type HTMLSelectElement.value HTMLSelectElement.form