JavaScriptを使って、セレクトボックスで選択した内容に応じて異なる動作を実行する方法を解説します。
基本例：選択に応じてボタンの動作を変更
まずは基本例として、セレクトボックスで選択した項目に応じて、ボタンをクリックしたときに異なるアラートメッセージを表示する例を作ります。
HTMLコード:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>セレクトボックスとイベント</title>
</head>
<body>
<label for="action-select">選択してください:</label>
<select id="action-select">
<option value="greet">挨拶</option>
<option value="warn">警告</option>
<option value="farewell">別れ</option>
</select>
<button id="action-button">実行</button>
<script>
const selectBox = document.getElementById('action-select');
const actionButton = document.getElementById('action-button');
actionButton.addEventListener('click', () => {
const selectedValue = selectBox.value;
switch (selectedValue) {
case 'greet':
alert('こんにちは！');
break;
case 'warn':
alert('注意してください！');
break;
case 'farewell':
alert('さようなら！');
break;
default:
alert('選択肢を選んでください。');
}
});
</script>
</body>
</html>説明:
- セレクトボックスの
idをaction-select、ボタンのidをaction-buttonとします。 - ボタンがクリックされたとき、セレクトボックスで選択されている値（
value属性）を取得します。 switch文を使って選択された値に応じて異なるアラートを表示します。
応用例1：選択に応じて背景色を変更
選択肢に応じて、ページの背景色を変更する例を紹介します。
HTMLコード:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色変更</title>
<style>
body {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<label for="color-select">色を選択してください:</label>
<select id="color-select">
<option value="white">白</option>
<option value="lightblue">青</option>
<option value="lightgreen">緑</option>
<option value="lightcoral">赤</option>
</select>
<button id="change-color-button">色を変更</button>
<script>
const colorSelect = document.getElementById('color-select');
const changeColorButton = document.getElementById('change-color-button');
changeColorButton.addEventListener('click', () => {
const selectedColor = colorSelect.value;
document.body.style.backgroundColor = selectedColor;
});
</script>
</body>
</html>
ポイント:
- 選択された色に応じて、
document.body.style.backgroundColorを変更します。 value属性にCSSで使える色名を指定することで、コードが簡潔になります。
応用例2：選択に応じて異なるフォームを表示
選択肢に応じて、異なるフォームを表示する例です。
HTMLコード:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォーム切り替え</title>
<style>
.form {
display: none;
margin-top: 20px;
}
.form.active {
display: block;
}
</style>
</head>
<body>
<label for="form-select">フォームを選択してください:</label>
<select id="form-select">
<option value="login">ログインフォーム</option>
<option value="signup">登録フォーム</option>
<option value="contact">お問い合わせフォーム</option>
</select>
<div id="login-form" class="form">
<h3>ログインフォーム</h3>
<input type="text" placeholder="ユーザー名">
<input type="password" placeholder="パスワード">
<button>ログイン</button>
</div>
<div id="signup-form" class="form">
<h3>登録フォーム</h3>
<input type="text" placeholder="名前">
<input type="email" placeholder="メールアドレス">
<button>登録</button>
</div>
<div id="contact-form" class="form">
<h3>お問い合わせフォーム</h3>
<textarea placeholder="お問い合わせ内容"></textarea>
<button>送信</button>
</div>
<script>
const formSelect = document.getElementById('form-select');
const forms = document.querySelectorAll('.form');
formSelect.addEventListener('change', () => {
forms.forEach(form => form.classList.remove('active'));
const selectedFormId = formSelect.value + '-form';
document.getElementById(selectedFormId).classList.add('active');
});
</script>
</body>
</html>ポイント:
- 各フォームには
class="form"を付け、display: noneで非表示にします。 - セレクトボックスで選択されたフォームだけを
activeクラスで表示するように切り替えます。
まとめ
セレクトボックスを使ったインタラクションは、ユーザーに直感的で簡単な選択肢を提供する方法です。基本的な動作から応用的なフォーム切り替えまで、多様な使い方が可能です。今回の例を参考に、実際のウェブアプリケーションに活用してみてください。
コメント