JavaScript onchangeでselectボックス選択後テキストボックスに文字を入力する

更新：2017-08-15

JavaScript onchangeを使い、セレクトボックスの選択肢を変更した際、テキストボックス内の文字を変更（自動入力）する。

select要素とonchange

以前作ったウェブアプリの使い勝手を良くしようと思い久しぶりに JavaScript に触れた。機能としては、セレクトボックス（プルダウンメニュー）で項目を選択すると、その項目にあった文字をテキストボックスに自動的に入力するもの。

以下HTML

<form action="./ppi_dpi.php" method="post" name="form1">
<select name="kaizoudo" id="kaizoudo">
<option value="manual">手入力（以下のテキストボックス）</option>
<option value="8k">8K（7680×4320）</option>
<option value="4k">4K（3840×2160）</option>
<option value="fhd">FHD（1920×1080）</option>
<option value="hd">HD（1280×720）</option>
</select>

<br />
画面の横のピクセル数<br />
<input type="text" value="" name="yoko" id="yoko"><br />
画面の縦のピクセル数<br />
<input type="text" value="" name="tate" id="tate"><br />
</form>

以下JavaScript

<script>
document.getElementById("kaizoudo").onchange = function(){
	var kaizoudo = document.getElementById("kaizoudo");
	//var i = kaizoudo.selectedIndex;
	//var s_value = kaizoudo.options[i].value;
	var dw = '';
	var dh = '';
	
	switch(kaizoudo.value){
		case 'manual':
			dw = '';
			dh = '';
			break;
		case '8k':
			dw = 7680;
			dh = 4320;
			break;
		case '4k':
			dw = 3840;
			dh = 2160;
			break;
		case 'fhd':
			dw = 1920;
			dh = 1080;
			break;
		case 'hd':
			dw = 1280;
			dh = 720;
			break;
	}
	
	document.getElementById("yoko").value = dw;
	document.getElementById("tate").value = dh;
};
</script>

イベントの取得は addEventListener を使わず、古いブラウザでも動くこのスタイルで記述した。

selectedIndex は select 要素で選択された項目の Index で、上から順に0、1、2、・・・となっている。 options[i].value はその項目の value。当初は selectedIndex を使っていたが、select要素.value（ここでは kaizoudo.value）で選択している項目の値を取得できるので使うのをやめた。そのためコメントアウトしている。

if では各 value と一致した場合に各テキストボックスに文字を自動的に入力する。 Index で比較しても良いが、項目の順番を入れ替えることを想定して value で比較。

表示例

JavaScript onchangeでselectボックス選択後テキストボックスに文字を入力する

select要素とonchange

カテゴリ