Habilitar textbox segun valor de un select que depende de otro select.

angel_dope · #1 (**permalink**) 17/04/2007, 03:57

Pues eso, tengo un par de selects que dependen entre si, es decir, si cambiar el primero, cambian las opciones del segundo, lo típico. Pues además de eso, quiero lo siguiente. En el 2º select, siempre está al final la opción "otros" pues quiero que cuando se seleccione esa opción, se habilite un textbox para que escriban ahi (si se puede tener oculto y que aparezca en ese momento, ya sería la repera). Ahh, y también existe la opción "otros" en el primer select y tendria que hacer lo mismo, claro.

Como tendria que hacerlo??? Os dejo el código del formulario y el javascript que he utilizado para los selects para que se vea más claro

Código PHP:

  <body> 
  <script language="JavaScript">  
 
   function addOpt(oCntrl, iPos, sTxt, sVal){  
     var selOpcion=new Option(sTxt, sVal);  
     eval(oCntrl.options[iPos]=selOpcion);  
   }  
 
   function cambia(oCntrl){  
    while (oCntrl.length) oCntrl.remove(0);  
    switch (document.form1.producto1.selectedIndex){  
     case 0:   
      addOpt(oCntrl,  0, "Al agua", "0");  
      addOpt(oCntrl,  1, "Hidroalcohólico", "1");  
      addOpt(oCntrl,  2, "Al disolvente", "2");  
      addOpt(oCntrl,  3, "Otros", "3");  
       
      break;  
     case 1:   
      addOpt(oCntrl,  0, "Poliuretano", "0");  
      addOpt(oCntrl,  1, "Acrílico", "1");  
      addOpt(oCntrl,  2, "Pigmentado", "2");  
      addOpt(oCntrl,  3, "Al ácido o reactiva", "3");  
      addOpt(oCntrl,  4, "Nitrocelulósico", "4");  
      addOpt(oCntrl,  5, "Poliester", "5");  
      addOpt(oCntrl,  6, "Pintura electroestática", "6");  
      addOpt(oCntrl,  7, "Otros", "7");  
      break;  
     case 2:   
      addOpt(oCntrl,  0, "Poliuretano", "0");  
      addOpt(oCntrl,  1, "Acrílico", "1");  
      addOpt(oCntrl,  2, "Pigmentado", "2");  
      addOpt(oCntrl,  3, "Al ácido o reactiva", "3");  
      addOpt(oCntrl,  4, "Nitrocelulósico", "4");  
      addOpt(oCntrl,  5, "Poliester", "5");  
      addOpt(oCntrl,  6, "Pintura electroestática", "6");  
      addOpt(oCntrl,  7, "Otros", "7");  
      break;  
     case 3:   
      addOpt(oCntrl,  0, "Otros", "0");  
     break;  
    case 4:   
      addOpt(oCntrl,  0, "Otros", "0");  
     break;  
 
 
    }  
   }  
  </script>  
 
<form id="form1" name="form1" method="post" action="insertar_disolventes.asp"> 
  <p>Por favor rellene el siguiente formulario para realizar los c&aacute;lculos necesarios para saber si est&aacute; afectado por el R.D.</p> 
  <table width="100%" border="1"> 
    <tr> 
      <td width="29%" rowspan="2">Producto</td> 
      <td colspan="2">      <select name="producto1" onchange="cambia(document.form1.producto2)">  
       <option value="0">Tinte</option>  
       <option value="1">Fondo</option>  
       <option value="2">Acabado</option>  
       <option value="3">Disolvente</option>  
       <option value="4">Otros</option>       
      </select>  
     </td> 
    </tr> 
    <tr> 
      <td width="25%">      <select name="producto2">  
       <option value="0">Al agua</option>  
       <option value="1">Hidroalcohólico</option>  
       <option value="2">Al disolvente</option>  
       <option value="3">Otros</option>         
      </select>  
 
        &nbsp;&nbsp;</td> 
      <td width="46%"><input name="producto2b" type="text" id="producto2b" />  
        <font size="1" face="Arial, Helvetica, sans-serif">*Especifique aqui si selecciona &quot;otros&quot; </font></td> 
    </tr></table></body>

Muchas gracias por adelantado. Salu2

P.D.: Acabo de caer en que si en el primero se selecciona "otros" el 2º cambia también a esa misma opción, asi que supongo que solo habria que controlar el segundo select, no??

axz · #2 (**permalink**) 19/07/2007, 13:15

Puedes hacer lo siguiente:

Mete el control text en un div oculto

Código HTML:

<div id="textOculto" style="display: none;">
  <input type="text" id="txtOtro" />
</div>

En el evento onchange del segundo SELECT lanza una función que verifique si el valor es el que esperas

Código HTML:

<select id="sel" onchange="verifica();">
  <option value="1">uno</option>
  <option value="otros">Otros más</option>
</select>

En la función dependiendo del valor mostrarás el control o lo ocultarás

Código PHP:

  function verifica()
{
  var sel = document.getElementById( 'sel' );
  var textOculto = document.getElementById( 'textOculto' );
  
  if( sel.options[ sel.selectedIndex ].value == 'otros' )
  {
    textOculto.style.display = 'block';
  }
  else
  {
    textOculto.style.display = 'none';
  }
}

Suerte

angel_dope · #3 (**permalink**) 20/07/2007, 00:00

Wow, ni me acordaba ya de esto jeje. Al final, como no supe como hacerlo, dejé el textbox siempre puesto, y hasta me ha venido bien, porque al final cambiaron algunas de las cosas que querían y ese campo siempre se rellenará. Pero muchas gracias de todas formas, me lo guardo por si me hace falta en otra ocasión. Salu2

axz · #4 (**permalink**) 20/07/2007, 10:00

Jejeje, si a veces se olvidan algunas cosas, qué bueno que te sirvió aunque sea para futuras referencias ...

un saludo

dark_2006 · #5 (**permalink**) 05/07/2009, 13:38

Gracias a mi tambien me sirve, parte de este código.
Muchas gracias, saludos desde Chile.

JavierB · #6 (**permalink**) 05/07/2009, 13:52

El mensaje original es de hace casi 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,