Como hacer en una etiqueta <option> una función dentro de <select>

[Drakaris]

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 [Seleccionar] Expandir


<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.

[engel lex]

haces un javascript onclick del select que si el value es otro, cambie la opacidad del input de 0 a 1

[#!drvy]

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 (html5) [Seleccionar] Expandir

<!-- CSS -->
<style type='text/css'>

#tipoEventos {
    border: inset;
    border-color: orange;
    opacity: 0.8;
    font-family: sgoe script;
    font-size: 14px;
}

    #tipoEventos option {
        font-family: sgoe script;
        color: #333;
        font-size: 1.5em;
    }

    #otroTipoEventos {
        display: none;
        border: inset;
        border-color: orange;
        opacity: 0.8;
        font-family:segoe script;
        font-size: 14px;
    }

</style>

<!-- HTML -->
<select name="tipoEventos" id="tipoEventos">

    <option value="null" selected disabled>---Eligir tipo de evento---</option>
    <option value="deberes">Deberes</option>
    <option value="trabajos">Trabajos</option>
    <option value="salidas">Salidas</option>
    <option value="vacaciones">Vacaciones</option>
    <option value="otro">Otro...</option>

</select>

<input type="text" name="otroTipoEventos" id="otroTipoEventos" disabled>


<!-- Codigo javascript -->
<script type='text/javascript'>
    document.getElementById('tipoEventos').addEventListener('change', function(){
        var valor = this.value;

        // Si el valor elegido del select == otro, habilitar la caja de texto.
        if(valor === 'otro'){
            var cajaTexto = document.getElementById('otroTipoEventos');
            cajaTexto.disabled = false;
            cajaTexto.style.display = 'inherit';

        }
    });
</script>


Saludos

[Drakaris]

 Muchas gracias #!drvy. Va perfecto!