0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】selectbox(プルダウン)の使い方メモ

Last updated at Posted at 2020-01-12

###1.はじめに
かなり昔に、jqueryのプラグインを使って100万行くらいのデータをグラフ化する
ツールを作る依頼を受けた。
その時に初めてjavascriptを調べて、ツールを作ったがそれ以来触ることが
無くなってしまった。

思い出すためにも、恐竜と鳴き声の回数をセットしたセレクトボックスを用意して
ボタンを押すと鳴き声を表示させるプログラムを練習用として作ってみた。

###2.恐竜の鳴き声を指定回数表示してみよう。(ソース)
今回のポイント

  • セレクトボックスの使い方
  • セレクトボックスの値の取得の仕方
  • 指定場所のテキストの変更

鳴かせる恐竜は、__我らがダークヒーロー「ティラノサウルス」と、
走る鎧こと「ユーオプロケファラス」__にした。
ユーオプロケファラスは尻尾攻撃が得意とのこと(jwaより)
ユーオプロケファラスの鳴き声は知らないので(というかティラノサウルスの声すら
聞いたことない)、尻尾攻撃の音にしてみた。

下のコードを記載したファイル(こんなのコピーする人がいるか
疑問だけど)を適当なところに保存して実行すると、実行イメージのように表示される。

dino_cry_for.html

<!DOCTYPE html>
<p>鳴き声<br>
<span id="d_cry"></span></p><br>

<form name="test">
	<select name="dino">
	    <option value="Tyranno">ティラノサウルス</option>
	    <option value="Euoploce">ユーオプロケファラス</option>
	</select>
	<select name="cry_n">
	    <option value="2">2</option>
	    <option value="4">4</option>
	    <option value="6">6</option>
	</select>
</form>
<input type="button" value="dinosor_crying!!" onClick="OnClickCrying()"/>

<script type="text/javascript">

function OnClickCrying(){
	//セレクトボックスのid
	const dino1 = document.test.dino;

	// 値(数値)を取得
	const num_dino = dino1.selectedIndex;
	
	const cry_n1=document.test.cry_n;
	//セレクトボックスの何番目を選択したか
	const idx_cry=cry_n1.selectedIndex;
	//セレクトボックスで選択した値を取得
	const num_cry2=cry_n1.options[idx_cry].value;
	
	var str_dino="";
	var c_dino="";
	
	if(num_dino == 0){
		c_dino="おおーん!!";
	}else{
		c_dino="ぴしっ!";
	}
	for(var i=0;i<num_cry2;i++){
		str_dino=str_dino+c_dino+"<br>";
	}
	document.getElementById("d_cry").innerHTML = str_dino;
}
</script>
</html>

###3.実行結果
js_dino_for.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?