HTML: select vs datalist
Tags: html, webdev, beginners, programming
Published: 2022-09-25 13:59:41

## 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**
```html
    <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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkf4e409055skmxevmde.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibcgxtrhxo938fi54l37.png)

**-> Doesn't filter items rather highlights the matching text.** Type in 'B' incase of our example and observe that BMW gets highlighted.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0akwo3m2ldsaiy00f95a.png)

**-> By default first option gets selected and populated as selected value**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka7taapnouxq53pzomvz.png)

**-> 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**
```html
<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>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbsgqx5ozsr73c1xyllk.png)

**-> To get selected value: document.getElementById('select#id').value;**
```javascript
document.getElementById('cars').value;
> bmw
```
**-> We can apply onchange on select tag.**
```html
<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>
```

**-> select by default display:inline-block**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ziqtwgvs2bijbl520r7.png)

**-> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlfmtisvdrlu409mzr8c.png)

## Datalist with examples:

**-> specifies list of predefined options for input element**
```html
    <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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otcgm5a0n44u8imjo636.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0zs98ce66kug2kig1h8.png)

**-> Shows only filtered items as soon as user start typing in text box**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wakvvuc3uu0t5d8cf9qe.png)

**-> Doesn't select any option by default.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpa6oc8xbu4mtgkuy2s9.png)

**-> User can choose from list or enter his own item.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heao9vilvc4luqpicpdx.png)

**-> We have to assign value attribute to pre-populate data in input**
```html
<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>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91rvjvdz1kr2j9l3g2pw.png)

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

**-> we can apply onchange on input element**
```html
<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>
```
**-> datalist by default display: none**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytj58qpriblsla46c7er.png)

**-> option value only populated in data list** We only provided values for each option element and not the labels. Also, same are populated.
```html
    <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>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z48rns31lodpo2x2r1qi.png)

Thanks.

Point any further differences.

Follow: https://twitter.com/urstrulyvishwak