【JavaScript】プルダウンメニューの変更を検知する方法

JavaScript

2019.09.21

はじめに
プルダウンメニューの変化を検知する方法
1. select要素の取得
2. selectタグの変化を取得
name属性でselectを取得したい場合
1. 関連記事はこちら

はじめに

この記事では、<Select>のプルダウンメニューの変化を検知してメソッドを実行する方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    <form action="#" method="POST">
        <select id="mySelect">
            <option value=""></option>
            <option value="apple">apple</option>
            <option value="orange">orange</option>
            <option value="grape">grape</option>
        </select>
    </form>
    <p class="log"></p>
    <script>
        //select要素の取得
        const element = document.querySelector('#mySelect');

        //変更イベントを監視
        element.addEventListener('change', handleChange);

        function handleChange(event) {
            const value = element.value;
            const log = value + ' を選択中です。';
            document.querySelector('.log').innerHTML = log;
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Practice</title>

</head>

<body>

<option value="apple">apple</option>

<option value="orange">orange</option>

<option value="grape">grape</option>

</select>

</form>

//select要素の取得

const element = document.querySelector('#mySelect');

//変更イベントを監視

element.addEventListener('change', handleChange);

function handleChange(event) {

const value = element.value;

const log = value + ' を選択中です。';

document.querySelector('.log').innerHTML = log;

}

</script>

</body>

</html>

プルダウンメニューの変化を検知する方法

select要素の取得

const element = document.querySelector('#mySelect');

1	const element = document.querySelector('#mySelect');

selectのid属性を取得。querySelectorの引数はCSSセレクタで指定する必要があります。

CSSセレクタの種類

selectタグの変化を取得

element.addEventListener('change', handleChange);

1	element.addEventListener('change', handleChange);

addEventListenerの第一引数に’change’を入れると、プルダウンの変化を検知し、第二引数のメソッドを実行します。

name属性でselectを取得したい場合

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    <form action="#" method="POST">
        <select name="mySelect">
            <option value=""></option>
            <option value="apple">apple</option>
            <option value="orange">orange</option>
            <option value="grape">grape</option>
        </select>
    </form>
    <p class="log"></p>
    <script>
        //select要素の取得
        const element = document.getElementsByName('mySelect')[0];

        //変更イベントを監視
        element.addEventListener('change', handleChange);

        function handleChange(event) {
            const value = element.value;
            const log = value + ' を選択中です。';
            document.querySelector('.log').innerHTML = log;
        }
    </script>
</body>
</html>