Código de JavaScript - Buscar dentro de un select y seleccionar el valor

Imágen de perfil
Val: 2.998
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Buscar dentro de un select y seleccionar el valorgráfica de visualizaciones


JavaScript

Publicado el 18 de Noviembre del 2016 por Xve (292 códigos)
38.708 visualizaciones desde el 18 de Noviembre del 2016
Este simple código muestra como buscar en los <option> de un <select> y seleccionar el valor encontrado desde JavaScript con selectedIndex.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(7)

Publicado el 18 de Noviembre del 2016gráfica de visualizaciones de la versión: Versión 1.0
38.709 visualizaciones desde el 18 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
	<head>
		<meta charset="UTF-8">
<script>
function buscarSelect()
{
	// creamos un variable que hace referencia al select
	var select=document.getElementById("elementos");
 
	// obtenemos el valor a buscar
	var buscar=document.getElementById("buscar").value;
 
	// recorremos todos los valores del select
	for(var i=1;i<select.length;i++)
	{
		if(select.options[i].text==buscar)
		{
			// seleccionamos el valor que coincide
			select.selectedIndex=i;
		}
	}
}
</script>
	</head>
	<body>
		<h2>Introduce un valor en el cuadro de texto que exista dentro del select y pulsa en buscar</h2>
		<form onsubmit="return false">
			<input type="text" id="buscar"><input type="submit" value="buscar" onclick="buscarSelect()">
			<p>
				<select id="elementos">
					<option value="0">...</option>
					<option value="1">coche</option>
					<option value="2">avion</option>
					<option value="3">moto</option>
					<option value="4">tren</option>
				</select>
			</p>
		</form>
	</body>
</html>



Comentarios sobre la versión: Versión 1.0 (7)

Imágen de perfil
18 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Ideal, muy útil tenerlo a mano.

Gracias por compartirlo.
Responder
Imágen de perfil
18 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
2 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
Te apoyo men
Responder
22 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Prefiero el select2, aunque gracias por compartir la información. Probaré este código
Responder
who
6 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Gracias, me ha servido mucho
Responder
Antonio
30 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Esta bastante bien el tutorial jeje facil, practico y hace lo que uno necesita
Responder
Jorge A. Pinto
10 de Noviembre del 2020
estrellaestrellaestrellaestrellaestrella
Excelente aporte, muy buena opción para manejar un select. En mi caso aproveché el código con un dato traido con Python desde MySQL y escogiéndolo en el select.

Muchas gracias. :)
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3753