Foros del Web » Programando para Internet » Javascript »

al presionar un select que instantaneamente se escriba algo en un span

Estas en el tema de al presionar un select que instantaneamente se escriba algo en un span en el foro de Javascript en Foros del Web. estoy intentando que al seleccionar un select se escriba un valor en un span.... lo estoy intentando hacer con la funcion onchange... pero aun logro ...
  #1 (permalink)  
Antiguo 16/10/2012, 13:20
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
al presionar un select que instantaneamente se escriba algo en un span

estoy intentando que al seleccionar un select se escriba un valor en un span.... lo estoy intentando hacer con la funcion onchange... pero aun logro que me funcione.... alguien me podria dar una mano? dejo mi codigo...


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>TripMinded - Add Transport</title>
  5. <link href="style/opineo.css" rel="stylesheet" type="text/css" />
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  7. <script type="text/javascript" src="js/addtransp.js"></script>
  8. <script type="text/javascript" src="js/opineo.js"></script>
  9.  
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <center>
  17.  
  18. <h1>Add Transport</h1>
  19.  
  20. <table width="100%" align="center">
  21.  
  22.  
  23.  
  24. <form id="addtransp" action="addTransport" name="addtrans" method="post">
  25.  
  26.  
  27.  
  28. <tr>
  29. <td>
  30.  
  31. <label>Select Traansport</label>
  32.  
  33. </td>
  34.  
  35. <td>
  36. <select id="typetrans" onchange="muestro()">
  37. <option value="Select">Select Transport</option>
  38. <option id="bus" value="Bus">Bus</option>
  39. <option id="air" value="Air">Air</option>
  40. <option id="car" value="Car">Car</option>
  41. <option id="train" value="Train">Train</option>
  42. <option id="bike" value="Bike">Bike</option>
  43. </td>
  44.  
  45.  
  46. </tr>
  47.  
  48.  
  49.  
  50. <tr>
  51. <td>
  52.  
  53. <span id="atr"></span>
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61. </td>
  62.  
  63. <td></td>
  64.  
  65.  
  66. </tr>
  67.  
  68.  
  69. <tr>
  70. <td><label>Images</label></td>
  71.  
  72. <td><input type="file" /></td>
  73.  
  74.  
  75. </tr>
  76.  
  77.  
  78.  
  79. <tr>
  80.  
  81.  
  82. <td><label>Driving time hours:</label></td>
  83.  
  84.  
  85. <td><input type="text" /></td>
  86.  
  87.  
  88. </tr>
  89.  
  90.  
  91.  
  92.  
  93. <tr>
  94. <td><label>Raiting</label></td>
  95.  
  96.  
  97. <td><div id="MiniView" style="width:500px"></div>
  98.  
  99.  
  100. </td>
  101.  
  102.  
  103. </tr>
  104.  
  105.  
  106. <tr>
  107. <td><label>Comentarios</label></td>
  108. <td><input type="text" height="200" width="300" /></td>
  109. </tr>
  110.  
  111.  
  112. <tr>
  113. <td></td>
  114. <td></td>
  115.  
  116. </tr>
  117.  
  118. <tr>
  119. <td></td>
  120.  
  121. <td><input type="submit" value="Add Transport" /></td>
  122.  
  123.  
  124. </tr>
  125.  
  126.  
  127.  
  128.  
  129. </form>
  130.  
  131.  
  132. </center>
  133.  
  134. </body>
  135. </html>



Código Javascript:
Ver original
  1. function muestro()
  2. {
  3.    
  4.        
  5.     if(document.getElementById("bus").value=="Bus")
  6.     {
  7.         document.getElementById("atr").innerHTML=="Station:"
  8.     }
  9.    
  10.     if(document.getElementById("air").value=="Air")
  11.     {
  12.         document.getElementById("atr").innerHTML=="Airport name:";
  13.     }
  14.    
  15.     if(document.getElementById("car").value=="Car")
  16.     {
  17.         document.getElementById("atr").innerHTML=="Model:";
  18.     }
  19.    
  20.     if(document.getElementById("train").value=="Train")
  21.     {
  22.         document.getElementById("atr").innerHTML=="Station:";
  23.     }
  24.    
  25.     if(document.getElementById("bike").value=="Bike")
  26.     {
  27.         document.getElementById("atr").innerHTML=="Model:";
  28.     }
  29.    
  30.  
  31.  
  32. }
  #2 (permalink)  
Antiguo 16/10/2012, 13:41
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: al presionar un select que instantaneamente se escriba algo en un span

el que te devuelve el value es typetrans no cada option, ejemplo:

Código Javascript:
Ver original
  1. if(document.getElementById("typetrans").value=="Bus")
  2.     {
  3.         document.getElementById("atr").innerHTML=="Station:"
  4.     }

es decir que el que cambia de valor es el select, cada option nunca perderá su valor, no hace falta ni el ID en los option
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: ajax, funcion, html, input, js, presionar, select, span
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:14.