onchange属性はフォームのコントロール部品（input要素, select要素, textarea要素）の属性値が変更されたときに起動するスクリプトを指定するイベント属性（イベントハンドラ）です。指定された要素により、イベントの発生段階が異なります。select要素の場合は選択メニューが選択されるとすぐにイベントが発生します（サンプルに select要素と組み合わせたスクリプトを用意しています）。input要素（type="text"）や textarea要素の場合はテキストの入力中にイベントが発生するのではなく、Enter を押して内容の変更を確定したとき、または変更後にテキスト入力欄からフォーカスを外したときにイベントが発生します（input要素は、テキスト入力欄のほかにも type="checkbox", type="radio", type="file" などのときにも使えます）。
次のスクリプトは、6*6*6=216通りの選択肢で、216色の Webセーフカラーに背景色を塗り替えることができます。
<script type="text/javascript">
function changeBgcolor() {
document.bgColor = "#"
+ document.getElementById('rgb').rval.options
[document.getElementById('rgb').rval.selectedIndex].value
+ document.getElementById('rgb').rval.options
[document.getElementById('rgb').rval.selectedIndex].value
+ document.getElementById('rgb').gval.options
[document.getElementById('rgb').gval.selectedIndex].value
+ document.getElementById('rgb').gval.options
[document.getElementById('rgb').gval.selectedIndex].value
+ document.getElementById('rgb').bval.options
[document.getElementById('rgb').bval.selectedIndex].value
+ document.getElementById('rgb').bval.options
[document.getElementById('rgb').bval.selectedIndex].value;
}></script>
......
<form id="rgb">
<table>
<tr><th>R</th><th>G</th><th>B</th></tr>
<tr><td>
<select onchange="changeBgcolor()" size="6" name="rval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td><td>
<select onchange="changeBgcolor()" size="6" name="gval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td><td>
<select onchange="changeBgcolor()" size="6" name="bval">
<option value="F" selected="selected">F</option><option value="C">C</option>
<option value="9">9</option><option value="6">6</option>
<option value="3">3</option><option value="0">0</option>
</select>
</td></tr>
</table>
</form>
次のスクリプトは、選択されたリンク先へと移動（ジャンプ）するプルダウン式メニューです。選択肢の中から選択された番号を "this.selectedIndex" で取得し、"this.options[番号].value" で選択肢何番の値、つまり、ここでは URI を取得し、最後に取得した URI を冒頭のスクリプトの "if(linkLoc !="") { window.location.href=linkLoc;}" に代入し、option要素の value属性の値が空でなければ、指定された URI へ移動（ジャンプ）するという仕組みです。
<script type="text/javascript">
function selectmenu(linkLoc) {
if(linkLoc !="") { window.location.href=linkLoc;}
}
</script>
......
<p>Aからはじまる要素一覧: <select
onchange="selectmenu(this.options[this.selectedIndex].value)">
<option value="" selected="selected">選択して下さい</option>
<option value="a.html">a要素</option>
<option value="abbr.html">abbr要素</option>
<option value="acronym.html">acronym要素</option>
<option value="address.html">address要素</option>
<option value="applet.html">applet要素</option>
<option value="area.html">area要素</option>
</select></p>
プルダウン式メニューは表示領域を抑える手段として有効です。たとえば、ブログのサイドメニューに記事を年月別にわけたリンクを用意している場合、月日が経つごとに段々とリンクが増えてきて場所を取るようになるので、このようにプルダウンメニューを使用するのが有効でしょう。ただし、各項目の印象度が落ちる上に、リンク先に行ったことがあるかどうかといった訪問リンク色を指定できない、さらには JavaScript が利用できない・無効にしている環境では効果がないなどの短所もあります。