Ich habe mich restlos verfahren! Wie bekomme ich die "value" an eine JS-Funktion .... Code: <form name="Categories"> <input placeholder="Bitte wählen ..." type="search" list="categories"> <datalist id="categories"> <option value="6">Alte Autos</option> <option value="26">Regenschirme</option> <option value="19">Gebrauchte Hurra-Rufe</option> <option value="10">Abgelegte Freundinnen</option> <option value="1">ADMIN-Spielwiese</option> </datalist> </form> ... ist trivial, aber ich check es grad nicht!
Ichsachma … Code: document.querySelectorAll('option').forEach(function(el) { console.log(el.getAttribute('value')); }); … oder so in der Art. Wenn du IE11-Kompatibilität noch brauchst, funktioniert forEach an der Stelle nicht, wenn ich mich recht entsinne.
Moment, Moment. Beschreib mal ganz langsam und ausführlich, was du da tun willst. In der Eingangsfrage ging es nämlich nur darum, wie man an die Werte des value-Attributs der option-Tags rankommt, und darauf hab ich geantwortet. Jetzt willst du aber irgendwelche Events verarbeiten, das passt gerade nicht.
Unklare Fragestellung => sorry! Code aus #1 ist ein DropDown made by Manni .. mit Volltextsuche. Wenn Option gewählt, dann "value" an js-Funktion "js_manni()" übergeben - that all.
Aaah, also so etwas: HTML: <!DOCTYPE html> <html> <head> <title>Option-Event-Handling</title> </head> <body> <form> <select id="selectthis"> <option value="eins">1</option> <option value="zwei">2</option> <option value="drei">3</option> </select> </form> <script> document.addEventListener('DOMContentLoaded', function() { let theSelect = document.querySelector('#selectthis'); theSelect.addEventListener('change', function() { let selectedOption = document.querySelector('#selectthis option:checked'); window.alert('selected: ' + selectedOption.getAttribute('value')); }); }); </script> </body> </html>
Im Prinzip ja - nur ich brauche <datalist> .. und das schliesst <select> aus => und das ist das wirkliche Problem!
Die <datalist> selbst ist ja kein interaktives Element, aber wenn du einen change-Eventlistener an das Element bindest, für das die <datalist> die Daten liefert, sollte das eigentlich gehen.
Kein JS-Tüfftler da, der das "value" aus dem Formular #1 an eine JS-Funktion bringt ... mit "onchange" oder "onclick" ?
... ist das noch aktuell? mit jquery: id=input1 zum input-Feld hinzufügen <script> $(function(){ $('input#input1').on('change',function(){ alert( $(this).val() ); }); </script> oder: <input placeholder="Bitte wählen ..." type="search" list="categories" onchange="alert(this.value);">