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

maximendez88 · #1 (**permalink**) 16/10/2012, 13:20

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TripMinded - Add Transport</title>
<link href="style/opineo.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/addtransp.js"></script>
<script type="text/javascript" src="js/opineo.js"></script>
 
 
 
 
</head>
 
<body>
 
<center>
 
<h1>Add Transport</h1>
 
<table width="100%" align="center">
 
 
 
<form id="addtransp" action="addTransport" name="addtrans" method="post">
 
 
 
<tr>
<td>
 
<label>Select Traansport</label>
 
</td>
 
<td>
<select id="typetrans" onchange="muestro()">
<option value="Select">Select Transport</option>
<option id="bus" value="Bus">Bus</option>
<option id="air" value="Air">Air</option>
<option id="car" value="Car">Car</option>
<option id="train" value="Train">Train</option>
<option id="bike" value="Bike">Bike</option>
</select>
</td>
 
 
</tr>
 
 
 
<tr>
<td>
 
<span id="atr"></span>
 
 
 
 
 
 
 
</td>
 
<td></td>
 
 
</tr>
 
 
<tr>
<td><label>Images</label></td>
 
<td><input type="file" /></td>
 
 
</tr>
 
 
 
<tr>
 
 
<td><label>Driving time hours:</label></td>
 
 
<td><input type="text" /></td>
 
 
</tr>
 
 
 
 
<tr>
<td><label>Raiting</label></td>
 
 
<td><div id="MiniView" style="width:500px"></div>
 
 
</td>
 
 
</tr>
 
 
<tr>
<td><label>Comentarios</label></td>
<td><input type="text" height="200" width="300" /></td>
</tr>
 
 
<tr>
<td></td>
<td></td>
 
</tr>
 
<tr>
<td></td>
 
<td><input type="submit" value="Add Transport" /></td>
 
 
</tr>
 
 
 
 
</form>
 
</table>
 
</center>
 
</body>
</html>

Código Javascript:

Ver originalfunction muestro()
{
    
        
    if(document.getElementById("bus").value=="Bus")
    {
        document.getElementById("atr").innerHTML=="Station:"
    }
    
    if(document.getElementById("air").value=="Air")
    {
        document.getElementById("atr").innerHTML=="Airport name:";
    }
    
    if(document.getElementById("car").value=="Car")
    {
        document.getElementById("atr").innerHTML=="Model:";
    }
    
    if(document.getElementById("train").value=="Train")
    {
        document.getElementById("atr").innerHTML=="Station:";
    }
    
    if(document.getElementById("bike").value=="Bike")
    {
        document.getElementById("atr").innerHTML=="Model:"; 
    }
    
 
 
}

maycolalvarez · #2 (**permalink**) 16/10/2012, 13:41

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

Código Javascript:

Ver originalif(document.getElementById("typetrans").value=="Bus")
    {
        document.getElementById("atr").innerHTML=="Station:"
    }

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