DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on • Updated on

HTML: select vs datalist

select

-> Creates drop down list
-> Doesn't filter items rather highlights the matching text
-> By default first option gets selected and populated as selected value
-> User can only select from a 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 onchange on select tag.
-> select by default display:inline-block
-> Option label populated and shown as option

datalist

-> Specifies list of predefined options for an input element
-> Shows only filtered items as soon as user start typing in text box
-> Doesn't select any option by default.
-> User can choose from list or enter his own item.
-> We have to assign value attribute to pre-populate data in input
-> To get selected value: document.getElementById('input#id').value;
-> We can apply onchange on input element
-> Datalist by default display: none
-> Option value only populated in data list

select with examples

-> Creates drop down list



    <label for="cars">Select a car: </label>
    <select id="cars" name="cars">
        <option value="volvo">VOLVO</option>
        <option value="bmw">BMW</option>
        <option value="audi">AUDI</option>
        <option value="lamborghini">LAMBORGHINI</option>
    </select>


Enter fullscreen mode Exit fullscreen mode

Image description

Image description

-> Doesn't filter items rather highlights the matching text. Type in 'B' incase of our example and observe that BMW gets highlighted.
Image description

-> By default first option gets selected and populated as selected value
Image description

-> User can only select from given list
We can't type in any characters as it is not an input box. Hence only option is to select from given list.

-> User can make any option selected by default using selected attribute



<label for="cars">Select a car: </label>
    <select id="cars" name="cars">
        <option value="volvo">VOLVO</option>
        <option value="bmw" selected>BMW</option>
        <option value="audi">AUDI</option>
        <option value="lamborghini">LAMBORGHINI</option>
    </select>


Enter fullscreen mode Exit fullscreen mode

Image description

-> To get selected value: document.getElementById('select#id').value;



document.getElementById('cars').value;
> bmw


Enter fullscreen mode Exit fullscreen mode

-> We can apply onchange on select tag.



<label for="cars">Select a car: </label>
    <select id="cars" name="cars" onchange="optionChanged(event)">
        <option value="volvo">VOLVO</option>
        <option value="bmw" selected>BMW</option>
        <option value="audi">AUDI</option>
        <option value="lamborghini">LAMBORGHINI</option>
    </select>

<script>
function optionChanged(event) {
    console.log(event.target.value);
}
</script>


Enter fullscreen mode Exit fullscreen mode

-> select by default display:inline-block
Image description

-> option label populated and shown as option
value is 'volvo' and its label is VOLVO. All the cars labels are displayed in dropdown.

Image description

Datalist with examples:

-> specifies list of predefined options for input element



    <label for="car">Select a car: </label>
    <input list="cars" name="cars" id="car">
    <datalist id="cars">
        <option value="volvo">
        <option value="bmw">
        <option value="audi">
        <option value="lamborghini">
    </datalist>


Enter fullscreen mode Exit fullscreen mode

Image description

Image description

-> Shows only filtered items as soon as user start typing in text box
Image description

-> Doesn't select any option by default.
Image description

-> User can choose from list or enter his own item.
Image description

-> We have to assign value attribute to pre-populate data in input



<label for="cars">Select a car: </label>
    <input list="car" name="car" id="cars" value="audi">
    <datalist id="car">
        <option value="volvo">
        <option value="bmw">
        <option value="audi">
        <option value="lamborghini">
    </datalist>


Enter fullscreen mode Exit fullscreen mode

Image description

-> to get selected value: document.getElementById('input#id').value;



document.getElementById('cars').value;


Enter fullscreen mode Exit fullscreen mode

-> we can apply onchange on input element



<label for="cars">Select a car: </label>
    <input list="car" name="car" id="cars" onchange="optionChanged(event)">
    <datalist id="car">
        <option value="volvo">
        <option value="bmw">
        <option value="audi">
        <option value="lamborghini">
    </datalist>
<script>
function optionChanged(event) {
    console.log(event.target.value);
}
</script>


Enter fullscreen mode Exit fullscreen mode

-> datalist by default display: none
Image description

-> option value only populated in data list We only provided values for each option element and not the labels. Also, same are populated.



    <label for="car">Select a car: </label>
    <input list="cars" name="cars" id="car">
    <datalist id="cars">
        <option value="volvo">
        <option value="bmw">
        <option value="audi">
        <option value="lamborghini">
    </datalist>


Enter fullscreen mode Exit fullscreen mode

Image description

Thanks.

Point any further differences.

Follow: https://twitter.com/urstrulyvishwak

Top comments (0)