0
208
ViewsAgregar un marcador de posición a la selección desplegable de Bootstrap
Estoy usando la bootstrap dropdown select para obtener una lista de datos en mi formulario.
El código es el siguiente
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> 
Estoy tratando de encontrar una manera de agregar el placeholder="From" , pero el atributo del marcador de posición no parece funcionar.
¿Hay una solución para esto?
3 answers
Answer question0
No hay placeholder de posición para una select HTML. Deberá hacer From , la primera option u optgroup (no recomendado aquí). La práctica común es usarlo así.
let text = "<option value=''>From</option>"; Al mantener value='' , puede asegurarse fácilmente de que no se realice la selección al marcar $("#bookingFromInput").val()=== "" .
0
En lugar de intentar poner "De" en el texto de la opción, el enfoque semánticamente correcto sería aplicar una etiqueta con ese texto , para que el usuario sepa en qué contexto se encuentra la selección.
Siempre debe aplicar etiquetas relevantes a sus controles from para accesibilidad y mejores prácticas de UX. Tenga en cuenta el atributo for="" en la etiqueta, que vincula la etiqueta al control de formulario con esa identificación y permite que los lectores de pantalla lo traduzcan en una estructura significativa.
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>