Hola, pues el código es el siguiente.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(document).ready(function () {
$('.eurowrapper').hide();
$('#def').show();
$('#drop2').change(function () {
$('.eurowrapper').hide();
$('#'+$(this).val()).show();
})
});
</script>
<b>Link del juego:</b>
<input type="text" value="" name="link_juego" />
<select name="tipo_de_juego" id="drop2">
<!-- disabled="disabled" no permite seleccionar ese elemento -->
<option value="" selected="selected" disabled="disabled">Selecciona el tipo de Juego</option>
<option value="" disabled="disabled">---</option>
<option value="" disabled="disabled"></option>
<!-- Agregamos el tipo de juego -->
<option value="flash">Flash</option>
<option value="java">Java</option>
<option value="unity">Unity3D</option>
<option value="iframe">iFrame</option>
<option value="otro">Código propio</option>
</select>
<span id="def" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="flash" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="java" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="unity" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="iframe" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="otro" class="eurowrapper"><br><br>
<textarea rows="5" cols="100" name="code" id="code" MAXLENGTH=5000></textarea><br>
<b><i>* Recuerda de poner el Ancho y alto, el embed correctamente, y link del juego. ;)<br>PD: El máximo de caracteres permitidos es 5000.</i></b>
<br></span>
<br>
Un saludo.
Ya que no estás usando XHTML, puedes cambiar los
selected="selected" por
selected y los
disabled="disabled" por
disabled.
Te aconsejo poner todos los atributos de HTML en minúsculas más que nada por legibilidad y concordancia.
En lo personal eliminaría todos los rows y cols y dejaría todo el diseño para el CSS. Lo cual también incluye los saltos de linea, evita las etiquetas <br> y mejor encierra todo en etiquetas de bloque (divs), te serán más útiles si piensas cambiar el diseño después.
Si pones tú script después del HTML que vas a modificar puedes ahorrarte el
$(document).ready().
Puedes usar la etiqueta "label" con el atributo "for" para que cuando se de clic en un texto ponga el cursor directo en el input que se va a modificar.
Por ejemplo así:
Citar<label for="ancho">Ancho:</label> <input type="text" name="ancho" id="ancho" maxlength="4" size="1" /> px.
Yo a lo que me venía a referir era a que si se podia hacer una matriz de elementos con lo de Show/Hide... ;)