セレクトボックスの選択に基づくテキストボックスの値設定

Posted on by

ウェブ開発において、ユーザーインターフェースの一部としてセレクトボックスを使ってユーザーからの入力を受け取り、それに基づいてテキストボックスに特定の値を設定するという場面はよくあります。このような動作は、ユーザー体験を向上させる上で重要な役割を果たします。本記事では、JavaScriptを使ってセレクトボックスで選択した項目に応じてテキストボックスに特定の値を設定する方法について詳しく解説します。

基本的なHTML構造

まず、セレクトボックスとテキストボックスの基本的なHTML構造を確認しましょう。

<select id="selectBox">
    <option value="option1">項目1</option>
    <option value="option2">項目2</option>
    <option value="option3">項目3</option>
</select>

<input type="text" id="textBox" />

このコードスニペットでは、IDがselectBoxの<select>要素（セレクトボックス）と、IDがtextBoxの<input type="text">要素（テキストボックス）を定義しています。セレクトボックスには、3つの選択肢（option1, option2, option3）が含まれています。

JavaScriptによる値の設定

セレクトボックスで選択された値に応じてテキストボックスに特定の値を設定するには、JavaScriptを使用します。以下にそのためのスクリプト例を示します。

<script>
    function updateTextbox() {
        var selectBox = document.getElementById("selectBox");
        var textBox = document.getElementById("textBox");
        var selectedValue = selectBox.value;

        // 選択された値に基づいてテキストボックスの値を設定
        switch(selectedValue) {
            case "option1":
                textBox.value = "特定の値1";
                break;
            case "option2":
                textBox.value = "特定の値2";
                break;
            case "option3":
                textBox.value = "特定の値3";
                break;
            default:
                textBox.value = ""; // デフォルトでは何も設定しない
        }
    }
</script>

このスクリプトでは、updateTextbox関数を定義しています。この関数は、セレクトボックスの選択が変更されたときに呼び出されます。関数内では、まずセレクトボックスとテキストボックスの要素を取得し、セレクトボックスで選択された値に応じてswitch文を使用してテキストボックスに設定する値を決定しています。

イベントハンドラの設定

セレクトボックスの選択が変更されたときにupdateTextbox関数が呼び出されるようにするためには、セレクトボックスのonchangeイベントにこの関数を設定する必要があります。HTML要素に直接イベントハンドラを追加する方法は以下の通りです。

<select id="selectBox" onchange="updateTextbox()">
    <!-- オプション -->
</select>

このコードでは、<select>要素のonchange属性にupdateTextbox()関数の呼び出しを設定しています。これにより、ユーザーがセレクトボックスの選択肢を変更するたびに、テキストボックスの値が更新されるようになります。

まとめ

JavaScriptを使用してセレクトボックスで選択した項目に応じてテキストボックスに特定の値を設定する方法は、ウェブアプリケーションにおいてユーザーの操作に基づいて動的にコンテンツを更新する際に非常に便利です。この記事で紹介したテクニックをマスターすることで、よりインタラクティブでユーザーフレンドリーなウェブページを作成することができます。