Skrypty zmienia zawartość strony w zależności od wyboru opcji w polu select formularza. Poszczególne teksty umieszczone są w osobnych warstwach, które przyjmują odpowiednio wartość display none lub block;

<script type="text/javascript">
 function podmiana(co) {
 var ile = document.getElementById("wybor").options.length;
 for(var i=1; i<=ile; i++) {
 var ktora = "w"+i;
 if(ktora == co) {
 document.getElementById(ktora).style.display = "block";
 }
 else if(ktora != co) {
 document.getElementById(ktora).style.display = "none";
 }
 }
 }
 </script>

W ten sposób umieściliśmy funkcję odpowiedzialnoną za zmianę wartości display dla poszczególnych warstw.

Następnie umieść deklarację stylów CSS dotyczącą warstw (w sekcji head). Style służą do zmiany wyglądu tekstu, tła itp.

<style type="text/css">
 #w1 {
 display: block;
 }
 #w2,#w3,#w4 {
 display: none;
 }
 </style>

Teraz należy w sekcji body umieścić warstwy w1, w2, w3 i w4 oraz formularz z polem select i wywołaniem funkcji podmiana().

A wywołanie funkcji w polu select formularza wygłada tak:

<form id="formularz" action="#">
 <select name="wybor" id="wybor" onChange="podmiana(this.value);">
 <option value="w1">Treść nr 1</option>
 <option value="w2">Treść nr 2</option>
 <option value="w3">Treść nr 3</option>
 <option value="w4">Treść nr 4</option>
 </select>
 </form>

Warstwy wstawiamy w taki sposób:

<div id="w1">Zawartość bloku tekstowego nr 1.</div> <div id="w2">Zawartość bloku tekstowego nr 2.</div> <div id="w3">Zawartość bloku tekstowego nr 3.</div> <div id="w4">Zawartość bloku tekstowego nr 4.</div>