選択リストで選択即実行する

selectメニュー(選択リスト)でメニューを選択するとChangeイベントが発生する。このonchangeイベントハンドラに速実行させたいScriptや関数を指定しておけばよい。選択したメニューのvalue値は this.value で取得できる。


● selectタグに直接onchangeイベントハンドラを指定する方式

↓のSampleの背景色を変更

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>  


(最終更新:12/12/22)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>