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

Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 18 de Noviembre del 2016 por xve
9.438 visualizaciones desde el 18 de Noviembre del 2016. Una media de 112 por semana
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(6)

Actualizado el 19 de Noviembre del 2016 (Publicado el 18 de Noviembre del 2016)gráfica de visualizaciones de la versión: Versión 1.0
9.439 visualizaciones desde el 18 de Noviembre del 2016. Una media de 112 por semana
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 (6)

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

Gracias por compartirlo.
Responder
Imágen de perfil
kip
18 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
Humberto
02 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
Te apoyo men
Responder
Jusep
22 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Prefiero el select2, aunque gracias por compartir la información. Probaré este código

https://quecosasleo.com/2017/05/select-con-buscador/
Responder
who
06 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

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3753  
Revisar política de publicidad