elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como hacer en una etiqueta <option> una función dentro de <select>
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como hacer en una etiqueta <option> una función dentro de <select>  (Leído 309 veces)
hacker 1

Desconectado Desconectado

Mensajes: 37


Ver Perfil
Como hacer en una etiqueta <option> una función dentro de <select>
« en: 17 Marzo 2017, 23:09 »

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.


En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 11.485



Ver Perfil
Re: Como hacer en una etiqueta <option> una función dentro de <select>
« Respuesta #1 en: 17 Marzo 2017, 23:15 »

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


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 4.542



Ver Perfil WWW
Re: Como hacer en una etiqueta <option> una función dentro de <select>
« Respuesta #2 en: 18 Marzo 2017, 19:09 »

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
En línea

hacker 1

Desconectado Desconectado

Mensajes: 37


Ver Perfil
Re: Como hacer en una etiqueta <option> una función dentro de <select>
« Respuesta #3 en: 18 Marzo 2017, 23:33 »

 Muchas gracias #!drvy. Va perfecto! ;D
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema, ¿como recogeriais estos datos de un select option?(SOLUCIONADO)
PHP
Littl3 4 3,586 Último mensaje 28 Mayo 2009, 14:33
por Spider-Net
Cambiar <option> seleccionada de un <select> segun valor en BD (PHP)
Desarrollo Web
Aikanáro Anário 2 14,760 Último mensaje 21 Junio 2012, 22:19
por Graphixx
formulario select option con onchange
Desarrollo Web
jecavi20 2 1,474 Último mensaje 17 Junio 2013, 03:36
por jecavi20
select, option
Desarrollo Web
ElInquisidor 2 496 Último mensaje 16 Diciembre 2014, 17:49
por ElInquisidor
select/option con dos renglones
Desarrollo Web
basickdagger 1 437 Último mensaje 5 Febrero 2016, 12:11
por #!drvy
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines