Quiero tener un elemento de select para que mis usuarios puedan elegir de una lista de elementos o, si lo desean, escribir un nuevo valor que no existe.
Sé que puedo hacer una selección como:
<select name="myDropdown" id="myDropdown"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>Pero no puede escribir en esta selección. Entonces, la siguiente opción que encontré es usar un conjunto de datos como:
<input type="text" list="existing-list" id='free-hand-enabled-dropdown'/> <datalist id="existing-list"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </datalist> Esto está mucho más cerca, pero el atributo de text para la opción no se muestra cuando se elige, solo se muestra el valor. De hecho, cuando inspecciona este elemento, el texto se ha borrado al cargar la página. Y el valor y el texto aparecen juntos en la lista desplegable. Puedo ver cómo funcionaría esto si solo quisiera sugerir algunos elementos para evitar que el usuario escriba.
Solo quiero un elemento de select que permita al usuario elegir de la lista como de costumbre, o escribir en el cuadro de entrada. Cuando se presiona el botón Enviar, javascript enviará el texto y los atributos de valor. Si el atributo de valor está en blanco, sabré que es una nueva entrada. ¡Abierto a sugerencias si esta es una idea horrible!
Aquí está la solución jquery.
Reemplacé el atributo text to title, porque el atributo personalizado sería fácil de obtener.
function submit(){ const input = $("#free-hand-enabled-dropdown").val(); //check if the attribute value and label exist if(typeof $("#existing-list option[value='" + input + "']").attr("value") && typeof $("#existing-list option[value='" + input + "']").attr("label") == 'undefined'){ console.log(input); }else{ console.log($("#existing-list option[value='" + input + "']").attr("value"),$("#existing-list option[value='" + input + "']").attr("label")); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" list="existing-list" id='free-hand-enabled-dropdown'/> <datalist id="existing-list"> <option value="1" label="One"></option> <option value="2" label="Two"></option> <option value="3" label="Three"></option> </datalist> <button type="button" onclick="submit()">Submit</button>