Código de JavaScript - Esconder o desmarcar opciones de un select dependiendo de otro select

Imágen de perfil

Esconder o desmarcar opciones de un select dependiendo de otro selectgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 28 de Julio del 2015 por xve
1.827 visualizaciones desde el 28 de Julio del 2015. Una media de 28 por semana
En este simple código, muestro como esconder o desmarcar una opción de un <select>, dependiendo de la selección de otro <select>, para que no se puedan seleccionar las mismas opciones en dos <select> iguales.

select-opcion-econdida

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 28 de Julio del 2015gráfica de visualizaciones de la versión: Versión 1
1.828 visualizaciones desde el 28 de Julio del 2015. Una media de 28 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<script>
	function seleccion(value)
	{
		var select=document.getElementById("select2");
 
		// Cogemos el listado de opciones en un array de valores
		var op=select.getElementsByTagName("option")
 
		// Seleccionamos la primera opción
		select.options[0].selected=true;
 
		// Recorremos todas las opciones del segundo select
		for (var i = 1; i < op.length; i++) {
 
			if(op[i].value == value)
			{
				// Si coincide, lo desmarcamos o escondemos
 
				//(selecciona una de las dos opciones)
 
// 				op[i].disabled = true;
				op[i].style.display="none";
			}else{
				// Si no coincide, lo marcamos o mostramos
 
				//(selecciona una de las dos opciones)
 
// 				op[i].disabled = false;
				op[i].style.display="block";
			}
		}
	}
	</script>
</head>
 
<body>
 
<form>
	<select name="select1" onchange="seleccion(this.value)">
		<option value="0">Selecciona</option>
		<option value="1">opción 1</option>
		<option value="2">opción 2</option>
		<option value="3">opción 3</option>
		<option value="4">opción 4</option>
		<option value="5">opción 5</option>
	</select>
 
	<select name="select2" id="select2">
		<option value="0">Selecciona</option>
		<option value="1">opción 1</option>
		<option value="2">opción 2</option>
		<option value="3">opción 3</option>
		<option value="4">opción 4</option>
		<option value="5">opción 5</option>
	</select>
</form>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Ubaldo
30 de Julio del 2015
estrellaestrellaestrellaestrellaestrella
Es interesante
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s3229