Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Drakaris en 17 Marzo 2017, 23:09 pm



Título: Como hacer en una etiqueta <option> una función dentro de <select>
Publicado por: Drakaris en 17 Marzo 2017, 23:09 pm
Hola estoy haciendo una etiqueta select que cuando clique en otro... me salga otra caja devtexto pero hice un onclick en option de otro... y no me va pero no se como se hace.
Código:
<select name="Tipo de eventos" style="border: inset;border-color: orange; opacity: 0.8; font-family: segoe script; font-size: 14px;">
        <option value="---Eligir tipo de evento---" selected onchange="populate(this.id,'otro')"><font face="segoe script" size="+1" color="#333333">---Eligir tipo de evento---</font></option>
        <option value="Deberes"><font face="segoe script" size="+1" color="#333333">Deberes</font></option>
        <option value="Trabajos"><font face="segoe script" size="+1" color="#333333">Trabajos</font></option>
        <option value="Salidas"><font face="segoe script" size="+1" color="#333333">Salidas</font></option>
        <option value="Vacaciones"><font face="segoe script" size="+1" color="#333333">Vacaciones</font></option>
        <option value="Otro..." id="otro"><font face="segoe script" size="+1" color="#333333">Otro...</font></option>
      </select>
      &nbsp;
      <input type="text" name="Tipo de eventos2" style="display: none; border: inset;border-color: orange; opacity: 0.8; font-family:segoe script; font-size: 14px;" id="otro">

Gracias.


Título: Re: Como hacer en una etiqueta <option> una función dentro de <select>
Publicado por: engel lex en 17 Marzo 2017, 23:15 pm
haces un javascript onclick del select que si el value es otro, cambie la opacidad del input de 0 a 1


Título: Re: Como hacer en una etiqueta <option> una función dentro de <select>
Publicado por: #!drvy en 18 Marzo 2017, 19:09 pm
La opcion de onchange deberia estar en el select y no en la opción. Lo que deberias tener es un listener general que haga cosas dependiendo de que opcion se eliga.

2 cosas antes:

- No uses inline js o inline css. Es feo, poco practico y hace la lectura y actualizacion dificil. Puedes usar estilos y scripts aparte.

- Los nombres (el atributo name) debería seguir una practica estandard. La cual es no contener espacios. Lo mismo para los valores. Ten en cuenta que en un futuro quizas requieras cambiar dichos valores o incluso traducirlos y que por culpa de este tipo de valores y nombres tendrás que editar todos los archivos que hagan referencia a ello.

- Los nombres y los ID's deberian ser los mismos por regla general.



Dicho esto,

CSS
Código
  1. <!-- CSS -->
  2. <style type='text/css'>
  3.  
  4. #tipoEventos {
  5.    border: inset;
  6.    border-color: orange;
  7.    opacity: 0.8;
  8.    font-family: sgoe script;
  9.    font-size: 14px;
  10. }
  11.  
  12.    #tipoEventos option {
  13.        font-family: sgoe script;
  14.        color: #333;
  15.        font-size: 1.5em;
  16.    }
  17.  
  18.    #otroTipoEventos {
  19.        display: none;
  20.        border: inset;
  21.        border-color: orange;
  22.        opacity: 0.8;
  23.        font-family:segoe script;
  24.        font-size: 14px;
  25.    }
  26.  
  27.  
  28. <!-- HTML -->
  29. <select name="tipoEventos" id="tipoEventos">
  30.  
  31.    <option value="null" selected disabled>---Eligir tipo de evento---</option>
  32.    <option value="deberes">Deberes</option>
  33.    <option value="trabajos">Trabajos</option>
  34.    <option value="salidas">Salidas</option>
  35.    <option value="vacaciones">Vacaciones</option>
  36.    <option value="otro">Otro...</option>
  37.  
  38.  
  39. <input type="text" name="otroTipoEventos" id="otroTipoEventos" disabled>
  40.  
  41.  
  42. <!-- Codigo javascript -->
  43. <script type='text/javascript'>
  44.    document.getElementById('tipoEventos').addEventListener('change', function(){
  45.        var valor = this.value;
  46.  
  47.        // Si el valor elegido del select == otro, habilitar la caja de texto.
  48.        if(valor === 'otro'){
  49.            var cajaTexto = document.getElementById('otroTipoEventos');
  50.            cajaTexto.disabled = false;
  51.            cajaTexto.style.display = 'inherit';
  52.  
  53.        }
  54.    });


Saludos


Título: Re: Como hacer en una etiqueta <option> una función dentro de <select>
Publicado por: Drakaris en 18 Marzo 2017, 23:33 pm
 Muchas gracias #!drvy. Va perfecto! ;D