Wyświetlanie nazw z listy rozwijanej

Często potrzebujemy wyświetlić na stronie, to co wybraliśmy w liście rozwijanej. Możemy to wykonać za pomocą skryptu javascript.

Lista rozwijana jest w postaci: 
<form name="lista" action="...">
  <select name="nazwa_listy">
    <option value="val1">nazwa 1</option>
    <option value="val2">nazwa 2</option>
    <option value="val3">nazwa 3</option>
    <option value="val4">nazwa 4</option>
  </select>
</form>
Wstawiamy do strony kod javascript, gdzie kolorami pokazano jakie nazwy trzeba zmienić: 
<script type="text/javascript">
<!--
	window.onload = Laduj;
	var active_id = "";

	function Laduj()
	{
		document.forms['lista'].nazwa_listy.onchange = Zmien;
	}

	function Zmien()
	{
		if (active_id != "")
		{
			var blok2 = document.getElementById(active_id);
			blok2.style.display = "none";
		}
		var blok = document.getElementById(this.value);
		blok.style.display = "block";
		active_id = this.value;
	}
-->	
</script>
A teraz wybieramy miejsce na stronie, na którym chcemy wyświetlić swoje dane. Ja uczyniłem to w polu tabeli: 

<table width="30%" height="30px"><tr><td><strong>
<div id="val1" style="display: none;">To jest nazwa 1</div>
<div id="val2" style="display: none;">To jest nazwa 2</div>
<div id="val3" style="display: none;">To jest nazwa 3</div>
<div id="val4" style="display: none;">To jest nazwa 4</div>
</strong></td></tr></table><br />
gdzie wartości witdth i height są przykładowe.

Wyświetlenie wybranej nazwy jest poprzez wartość zmiennej value. Wybierz teraz jakąś nazwę z listy rozwijanej, a zobaczysz, jak w polu tabeli pokaże się jej nazwa.