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

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>

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

1.はじめに

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

3.実行結果