Mostrar un value en pantalla

[Fidodo]

Muy buenas a todos, llevo un rato buscando en manuales onine y foros varios, pero no termino de conseguir lo que quiero, y creo que para muchos de vosotros será algo básico.

Tengo el siguiente código escrito, un selector sencillito donde escoger una opción:

<select name="Nombres">
<option selected value="0"> Elige una opción </option>
<option value="00">Antonio</option>
<option value="10">Alvaro</option>
<option value="20">Juani</option>
<option value="30">Fernando</option>
<option value="40">Luis</option>
<option value="50">Javier</option>
<option value="60">Eduardo</option>
<option value="70">Marcos</option>
<option value="80">Rafael</option>
</select>

Pues bien, el selector me funciona correctamente, pero en otro lugar de la página quiero que se me muestre como texto plano el value de la opción seleccionada, pero no lo consigo, ¿alguno me puedo echar un cable?

Gracias de antemano.

[BeikerxD]

Creo que con HTML y CSS simple no lo conseguirás, deberías usar JavaScript o PHP para obtener el valor de la opcion seleccionada, creoo...

[xfxstudios]

Como ya te dijeron, necesitas javascript para ello:

Código HTML:

<select name="Nombres" onChange="muestra()">
  <option selected value="0"> Elige una opción </option>
  <option value="00|cero cero">Antonio</option>
  <option value="10|Diez">Alvaro</option>
  <option value="20|Veinte">Juani</option>
  <option value="30|Treinta">Fernando</option>
  <option value="40|Cuarenta">Luis</option>
  <option value="50|Cincuenta">Javier</option>
  <option value="60|Sesenta">Eduardo</option>
  <option value="70|Setenta">Marcos</option>
  <option value="80|Ochenta">Rafael</option>
</select>
<br>
Esta es tu opción: <br><h2><span id="respuesta"></span></h2></b>
 

Código Javascript:

function muestra(){
  var X = $("select[name=Nombres]").val();
  var B = X.split("|");
  
  $("#respuesta").html(B[1]);  
  
}
 

Aquí una muestra que hice: http://codepen.io/anon/pen/wWwxQN

[IsaBelM]

prueba así

<select name="Nombres" onChange='fnc(this)'>
<span id='t'></span>

function fnc(este) {
document.querySelector('#t').textContent = este.options[este.selectedIndex].text;
}