選択リストで選択即実行する
selectメニュー(選択リスト)でメニューを選択するとChangeイベントが発生する。このonchangeイベントハンドラに速実行させたいScriptや関数を指定しておけばよい。選択したメニューのvalue値は this.value で取得できる。
● selectタグに直接onchangeイベントハンドラを指定する方式
↓のSampleの背景色を変更
Sample
● window.onloadで指定する方式
↑のSampleの文字色を変更
selectメニュー(選択リスト)でメニューを選択するとChangeイベントが発生する。このonchangeイベントハンドラに速実行させたいScriptや関数を指定しておけばよい。選択したメニューのvalue値は this.value で取得できる。
● selectタグに直接onchangeイベントハンドラを指定する方式
↓のSampleの背景色を変更
● window.onloadで指定する方式
↑のSampleの文字色を変更
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function ChangeColor(c){
document.getElementById("sample").style.backgroundColor =
c;
}
window.onload = function(){
document.getElementById("sele").onchange = function(){
document.getElementById("sample").style.color = this.value;
}
}
//--></script>
</head>
<body>
<p>● selectタグに直接onchangeイベントハンドラを指定する方式</p>
<p>↓のSampleの背景色を変更
<select onchange="ChangeColor(this.value)">
<option value="" selected>(色を選択してください)</option>
<option value="green">緑色</option>
<option value="blue">青色</option>
<option value="red">赤色</option>
<option value="white">白色</option>
</select></p>
<h5 id="sample">Sample</h5>
<p>● window.onloadで指定する方式</p>
<p>↑のSampleの文字色を変更
<select id="sele"">
<option value="" selected>(色を選択してください)</option>
<option value="green">緑色</option>
<option value="blue">青色</option>
<option value="red">赤色</option>
<option value="black">黒色</option>
</select></p>