Comunidad de diseño web y desarrollo en internet online

No dejar seleccionar dos items iguales en selects diferentes

Citar            
MensajeEscrito el 10 Jul 2010 02:20 am
Espero puedan ayudarme, tengo dos select con diferentes nombres pero tienen los mismos items, lo que necesito es que no me deje seleccionar el mismo item en ambos select, que puedo hacer, hay alguna forma de quitar el item del select o mostrar un mensaje?... estoy tratando de ver como puedo hacerlo con mootools pero no tengo mucho conocimiento de JavaScript, gracias !

Por logoys

Claber

104 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Jul 2010 04:20 am
Buscando por aqui encontre un post del cual copie el codigo e hice alguna modificacion quedando asi:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Ejemplo</title>
   <script type="text/javascript" src="jquery-1.4.2.js"></script>

   <script type="text/javascript">
   $(function(){

   var oCombo = document.getElementById('otro');
     var iValue = oCombo.value;
      var val = iValue;
      $('#combo option[value='+val+']').remove();
   });
   </script>
</head>

<body>

<select id=otro">
   <option value="hola">Hola</option>
   <option value="mundo">Mundo</option>
   <option value="cruel">Cruel</option>
   <option value="ydespiadado">y despiadado</option>
</select>

<select id="combo">
   <option value="hola">Hola</option>
   <option value="mundo">Mundo</option>
   <option value="cruel">Cruel</option>
   <option value="ydespiadado">y despiadado</option>
</select>

</body>
</html>



Al cambiar el item del select no pasa nada hasta no actualizar la pagina, existe alguna forma de no tener que refrescar la pagina para que quite el item del segundo select y que seleccione en el primer select?

Por logoys

Claber

104 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Jul 2010 08:10 pm
Veras le he metido un botón para que veas como funciona. Al presionar el botón si las dos opciones son iguales salta un alerta desciendo que no se pueden elegir dos opciones iguales. Si no un alerta que indica el estado de OK.

Donde va el alerta de Ok debes de seguir con tus funciones.....
El script funciona con jquery para esto le tienes que anidar lógicamente la librería jquery para que te funcione.
He comentado el código para que lo veas mejor....

Cualquier duda pregunta por aquí....
Espero haberte ayudado saludos....

Ademas hay mas informacion en el enlace, pero esta en ingles....

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
   <script type="text/javascript">
   /*Esto siempre que se inicializa jqyery tienes que meter significa que el documento esta listo en el DOM*/
   $(document).ready(function(){
     /*Aqui se inicializa el evento del click del raton*/  
     $(".submitbtn").click(function(){
     /*Se le aplica la condicion basada en el texto que esta escrito adentro del value no el value en si
     Si deseas el value en si al envez de decir $("#otro :selected").text() deberias de decir $("#otro").val()
     Por ejemplo he alterado el texto de la primera opcion que ahora no es mas hola es "que tal".
     Esto es lo que se compara al precionar el boton y no el hola que seria el value si quieres el hola seria $("#otro").val()
     */                          
     if($("#otro :selected").text() == $("#combo :selected").text()){
     alert("No puedes elegir dos opciones iguales");
     }
     else{
     alert("Todo Ok");
     }
   });
   });
   </script>
</head>

<body>
<select id="otro">
   <option value="hola">que tal</option>
   <option value="mundo">Mundo</option>
   <option value="cruel">Cruel</option>
   <option value="ydespiadado">y despiadado</option>
</select>

<select id="combo">
   <option value="hola">que tal</option>
   <option value="mundo">Mundo</option>
   <option value="cruel">Cruel</option>
   <option value="ydespiadado">y despiadado</option>
</select>

<input type="submit" class="submitbtn" value="enviar"/>
</body>
</html>

Por fininhop

18 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.