This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Kurapati Mahesh
select
-> creates dropdown list
-> Don't filter items rather highlights the matching text
-> By default first option gets selected and populated as selected value
-> User can only select from given list
-> User can make any option selected by default using selected attribute
-> to get selected value: document.getElementById('select#id').value;
-> We can apply on change on select tag.
-> select by default display:inline-block
-> option label populated
datalist
-> specifies list of predefined options for input element
-> filters and shows only filtered times as soon as user start typing in text box
-> Doesn't select any option by default.
-> User can chose from list or enter his own item.
-> We must have to assign value attribute to pre populate data in input
-> to get selected value: document.getElementById('input#id').value;
-> we can apply on onchange on input element
-> datalist by default display: none
-> option value only populated in data list
Will soon give examples for each item.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Kurapati Mahesh
Kurapati Mahesh | Sciencx (2022-09-25T13:59:41+00:00) HTML: select vs datalist. Retrieved from https://www.scien.cx/2022/09/25/html-select-vs-datalist/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.