Tema: al presionar un select que instantaneamente se escriba algo en un span
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/10/2012, 13:20
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 7 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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>TripMinded - Add Transport</title>
  6. <link href="style/opineo.css" rel="stylesheet" type="text/css" />
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  8. <script type="text/javascript" src="js/addtransp.js"></script>
  9. <script type="text/javascript" src="js/opineo.js"></script>
  10.  
  11.  
  12.  
  13.  
  14. </head>
  15.  
  16. <body>
  17.  
  18. <center>
  19.  
  20. <h1>Add Transport</h1>
  21.  
  22. <table width="100%" align="center">
  23.  
  24.  
  25.  
  26. <form id="addtransp" action="addTransport" name="addtrans" method="post">
  27.  
  28.  
  29.  
  30. <tr>
  31. <td>
  32.  
  33. <label>Select Traansport</label>
  34.  
  35. </td>
  36.  
  37. <td>
  38. <select id="typetrans" onchange="muestro()">
  39. <option value="Select">Select Transport</option>
  40. <option id="bus" value="Bus">Bus</option>
  41. <option id="air" value="Air">Air</option>
  42. <option id="car" value="Car">Car</option>
  43. <option id="train" value="Train">Train</option>
  44. <option id="bike" value="Bike">Bike</option>
  45. </select>
  46. </td>
  47.  
  48.  
  49. </tr>
  50.  
  51.  
  52.  
  53. <tr>
  54. <td>
  55.  
  56. <span id="atr"></span>
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64. </td>
  65.  
  66. <td></td>
  67.  
  68.  
  69. </tr>
  70.  
  71.  
  72. <tr>
  73. <td><label>Images</label></td>
  74.  
  75. <td><input type="file" /></td>
  76.  
  77.  
  78. </tr>
  79.  
  80.  
  81.  
  82. <tr>
  83.  
  84.  
  85. <td><label>Driving time hours:</label></td>
  86.  
  87.  
  88. <td><input type="text" /></td>
  89.  
  90.  
  91. </tr>
  92.  
  93.  
  94.  
  95.  
  96. <tr>
  97. <td><label>Raiting</label></td>
  98.  
  99.  
  100. <td><div id="MiniView" style="width:500px"></div>
  101.  
  102.  
  103. </td>
  104.  
  105.  
  106. </tr>
  107.  
  108.  
  109. <tr>
  110. <td><label>Comentarios</label></td>
  111. <td><input type="text" height="200" width="300" /></td>
  112. </tr>
  113.  
  114.  
  115. <tr>
  116. <td></td>
  117. <td></td>
  118.  
  119. </tr>
  120.  
  121. <tr>
  122. <td></td>
  123.  
  124. <td><input type="submit" value="Add Transport" /></td>
  125.  
  126.  
  127. </tr>
  128.  
  129.  
  130.  
  131.  
  132. </form>
  133.  
  134. </table>
  135.  
  136. </center>
  137.  
  138. </body>
  139. </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. }