0
199
ViewsAdding a placeholder to Bootstrap dropdown select
I'm using the bootstrap dropdown select to get a list of data to my form.
The code is as below
jQuery(async function () {
await LocationService.getOnlineLocations();
let allLocations = LocationService.getAllLocationsAsArray();
console.log(allLocations);
$("#bookingFromInput").ready(function () {
let text = "";
allLocations.forEach((element) => {
text += `<option value="${element.name}">${element.name}</option>`;
});
console.log(text);
$("#bookingFromInput").html(text);
});
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<select class="form-select" id="bookingFromInput" name="from" aria-label="Default select example" autofocus>
<option></option>
</select>
I'm trying to figure out a way to add the placeholder="From" but the placeholder attribute doesn't seem to work.
Is there a fix for this?
3 answers
Answer question0
There is no placeholder for an HTML select. You will have to make From, the first option or optgroup(not recommended here). Common practice is to use it like this.
let text = "<option value=''>From</option>";
By keeping the value='' you can easily ensure that selection is not made by checking $("#bookingFromInput").val()=== "".
0
Rather than trying to put "From" in the option text - the semantically correct approach would be to apply a label with that text - so that the user knows what the select is in context to.
You should always apply relevant labels to your from controls for accessibility and UX best practise. Note the for="" attribute on the label - that ties the label to the form control with that id and allows screen readers to translate that into meaningful structure.
label {display:block; margin-bottom: 4px}<div class="form-group">
<label for="bookingFromInput">From:</label>
<select class="form-select" id="bookingFromInput" name="from" aria-label="Booking From Location" autofocus>
<option>Amsterdam</option>
<option>Brunswick</option>
<option>London</option>
<option selected>Stongehenge</option>
<option>Sydney</option>
</select>
</div>0
//try using select2 [![answer][1]][1]
$('#bookingFromInput').select2({'placeholder':'From',allowClear: true});
//empty if options present
$('#bookingFromInput').empty();
//add empty value
$('#bookingFromInput').append('<option value=""></option>');
//add option list
$('#bookingFromInput').append('<option value="Bengaluru">Bengaluru</option>');
$('#bookingFromInput').append('<option value="Delhi">Delhi</option>');
$('#bookingFromInput').append('<option value="NewYork">NewYork</option>');<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="bookingFromInput" style="width:80%;">
<option value=""></option>
</select>