Greetings I would like to know if there is a way to set a selected value in a datalist. I would like something like this
<input list="cars" class="form-control" name="caBrands" style="width:300px;">
<datalist id="cars" >
<option selected="selected" value="BMW">
<option value="Toyota">
<option value="Mitsubishi">
</datalist>
HTML5 <datalist> elements cannot be styled.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
The datalist is just an auto-complete list to be used with a textual input element. If you want to pre-set a value, just set the value of the input:
<input list="cars" value="BMW" class="form-control" name="caBrands" style="width:300px;">
<datalist id="cars">
<option value="BMW">
<option value="Toyota">
<option value="Mitsubishi">
</datalist>
If you want to always select a value from a list, you can use a select element. This allows marking one option as selected, but it doesn't allow freeform input:
<select class="form-control" name="caBrands" style="width:300px;">
<option selected value="BMW">BMW</option>
<option value="Toyota">Toyota</option>
<option value="Mitsubishi">Mitsubishi</option>
</select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With