JavaScript - eliminar option en ON CHANGE

   
Vista:

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 11/01/2016 21:02:25
Tengo un 2 select
<select class="form-control" id="7_piso_num2" value="" name="7_piso_num2[]" >
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
..........

<select class="form-control" id="7_piso_num3" value="" name="7_piso_num3[]" >
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
..........
el cual quiero que cuando se eliga una opcion en el select siguiente que coloque desaparezca la opcion escogida en el anterior, me explico si escogo el "option 1" en el select "7_piso_num2" al momento de escoger en el slect "7_piso_num3" no pueda escoger el option del select "7_piso_num2".

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

eliminar option en ON CHANGE

Publicado por xve (1595 intervenciones) el 12/01/2016 08:05:42
Hola Victor no se si he entendido bien, quieres que no se puedan repetir los <option> seleccionados, no? es decir si en el primero se selecciona un valor, en el segundo ese valor no se puede seleccionar... es correcto?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 12/01/2016 12:30:52
Exactamente, hasta el momento como prueba solamente los tenia los 2 <select> con los mismos <option> la idea que si en el primero se selecciono un <option> en el segundo no se pueda seleccionar el mismo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

eliminar option en ON CHANGE

Publicado por xve (1595 intervenciones) el 12/01/2016 20:31:05
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por arck (74 intervenciones) el 12/01/2016 13:32:17
La solución que veo es poner un onchange en las dos select y comprobar por valor.
dale a la etiqueta option un value y lo único que haces es cada vez que cambie si es ==al value de la otra select y diferente de 0 se cambia al 0 y si no se mantiene.
0 seria la opción <option></option>

Solo te puedo dar la idea, siempre he utilizado jQuery y se que el código que te daria estaria mal.
Si lo quieres en JQuery avisa y lo hago en un momentillo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 12/01/2016 13:34:24
no es problema hacerlo en JQuery, es bien recibido diferentes alternativas para tener una idea de la solucion, Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por arck (74 intervenciones) el 12/01/2016 15:24:48
pues mas o menos seria asi.

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
<select class="form-control" id="7_piso_num2" value="" name="7_piso_num2[]" onChange="select2()">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
..........
 
<select class="form-control" id="7_piso_num3" value="" name="7_piso_num3[]" onChange="select3">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
..........
 
 
function select2(){
var dato2 = document.getElementById("7_piso_num2").value;
var dato3 = document.getElementById("7_piso_num3").value;
if ((dato2 ==dato3) &&(dato2!=0)){
 document.getElementById("7_piso_num2").value =0;
}
}
 
function select2(){
var dato2 = document.getElementById("7_piso_num2").value;
var dato3 = document.getElementById("7_piso_num3").value;
if ((dato2 ==dato3) &&(dato3!=0)){
 document.getElementById("7_piso_num3").value =0;
}
}

Creo que quedaria una cosita asi, dejas seleccionar siempre pero en el momento que sea igual al seleccionado en la otra select y diferente del valor 0 que es la <option/> haces que se selecione el =0.

No se si me explique bien, el código supongo que no compilara ni de coña porque lo hice directamente aquí, espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 12/01/2016 15:44:20
muchas gracias me sirvio, segui un poco tus lineas pero no me funcionaba tal cual como queria, realize alguna modificacion de manera que reconoce el valor del primer select y asi dejar disable el segundo select

1
2
3
4
function select2(){
var dato2 = document.getElementById("7_piso_num").value;
document.getElementById("7_piso_num2").options[dato2].disabled = true;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por arck (74 intervenciones) el 12/01/2016 15:49:23
Yo nunca había dejado solo una opción de un select en disabled, me acabo de enterar que se puede :D
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

eliminar option en ON CHANGE

Publicado por Vainas (239 intervenciones) el 12/01/2016 19:06:51
arck aqui hemos venido a aprender todos .

Yo usaria jQuery ya que asi tienes compatibilidad en la mayoria de los navegadores. Tambien usaria addEventListener o "on" de jQuery para cargar la funcion en los elementos (es mejor acostumbrarse a las buenas practicas).

Fijate en este ejemplo: https://jsfiddle.net/9c5kc6sb/

Espero que te sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 12/01/2016 20:17:17
muy buen aporte muchas gracias, lo implente con 3 select, ahora me cabeceo un poco porque tengo un plus
los 3 select los tengo en una tabla, la cual con un boton agrego una nueva fila de 3 select y la idea que me agarre los valores de los anteriores select para que no se repitan
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

eliminar option en ON CHANGE

Publicado por Victor (11 intervenciones) el 12/01/2016 20:31:18
Ya solucione lo anteriormente comentado dejo el codigo pro si les sirve a alguien

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function select(){
var dato2 = document.getElementById("7_piso_num");
var dato3 = document.getElementById("7_piso_num2");
var dato4 = document.getElementById("7_piso_num3");
for(i=1; i< dato2.length; i++){
	dato2.options[i].disabled = false;
}
for(i=1; i< dato3.length; i++){
	dato3.options[i].disabled = false;
}
for(i=1; i< dato4.length; i++){
	dato4.options[i].disabled = false;
}
dato2.options[dato3.value].disabled = true;
dato3.options[dato2.value].disabled = true;
dato4.options[dato2.value].disabled = true;
dato4.options[dato3.value].disabled = true;
dato2.options[dato4.value].disabled = true;
dato3.options[dato4.value].disabled = true;
dato3.options[dato3.value].disabled = true;
dato2.options[dato2.value].disabled = true;
dato4.options[dato4.value].disabled = true;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

eliminar option en ON CHANGE

Publicado por Vainas (239 intervenciones) el 12/01/2016 14:40:14
Buenas:

Un option puede ser desabilitado... con eso puedes jugar para esta tema.

Solo es colocarle el atributo disabled. recuerda que cuando hay un cambio hay que quitarle el disable al que se puso anteriormente (o sino a todos y ya esta).

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar