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>
-> Doesn't filter items rather highlights the matching text. Type in 'B' incase of our example and observe that BMW gets highlighted.
-> By default first option gets selected and populated as selected value
-> 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>
-> To get selected value: document.getElementById('select#id').value;
document.getElementById('cars').value;
> bmw
-> 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>
-> select by default display:inline-block
-> option label populated and shown as option
value
is 'volvo' and its label is VOLVO
. All the cars labels are displayed in dropdown.
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>
-> 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
<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>
-> to get selected value: document.getElementById('input#id').value;
document.getElementById('cars').value;
-> 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>
-> datalist by default display: none
-> 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>
Thanks.
Point any further differences.
Top comments (0)