select element -> Befehl ("action"), der hinter einer Auswahl steht, mit <return> ausführen [Problem gelöst]

uroveits · 21.08.2023

Hallo zusammen,

ich möchte erreichen, dass bei Anwendung des "select"-Elements die ausgewählte Möglichkeit mit <return> ausgeführt wird und nicht der Button "Submit" angeklickt werden muss.
Frage: geht das überhaupt bzw. wie ist der Quellcode dafür?

Ich habe ein Beispiel für einen Standard-Quellcode weiter unten aufgeführt. Dieser Quellcode löst die "action" aus, wenn auf den Button "Submit" geklickt worden ist. Ich möchte aber erreichen, dass
1) z.B. "Volvo" ausgewählt wird und somit im Auswahlkasten "Choose a car" erscheint und
2) dann durch Drücken der <return>-Taste die "action" gestartet wird (und nicht der Button "Submit" angeklickt werden muss)

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>

</body>
</html>

Gruß

Jochen

Sempervivum · 22.08.2023

Normaler Weise ist es Standard, dass ein Formular auch mit Enter abgeschickt wird aber anscheinend funktioniert das nur mit Eingabefeldern, beim Select klappt die Liste nur auf.
Versuche es auf folgende Weise:

Registriere einen Eventlistener für "keydown" auf dem Select:
https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
Prüfe, ob die Enter-Taste gedrückt wurde, den Code für die Taste findest Du hier:
https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
Stelle das DOM-Element des Formulars bereit und wende darauf die Funktion submit an:
https://www.w3schools.com/jsref/met_form_submit.asp

uroveits · 23.08.2023

Hallo Sempervivum,

vielen Dank für das "Drüberschauen" und Kümmern.

Aufgrund Deiner Antwort habe ich eine Lösung meines Problems gefunden. Zwar nicht, wie Du es vorgeschlagen hast. Aber Du hast mich auf die richtige Fährte geführt: bei einem "select"-Element kann eingestellt werden, dass bei einer Änderung des vorgegebenen Wortes in dem Filterfeld - also bei einer "Selektion" einer Auswahlmöglichkeit - automatisch die Suche/Filterung mit dem selektierten Begriff ausgelöst werden kann.
jQuery('#individueller Eintrag 1').on('change', function()
{
jQuery("#individueller Eintrag 2").submit();
})