【jQuery】複数のプルダウンで自動計算処理

複数のプルダウンがあり、そのプルダウンで得点を選択すると合計得点を動的に表示する実装になります。

HTML

<select class="score">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
</select>

<select class="score">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
</select>

<ul>
    <li>合計得点</li>
    <li　id="totalScore"></li>
    <li>点</li>
</ul>

jQueryの処理

    function sumSelectedScore() {
        let totalScore = 0;
    
        $('.score').each(function () {
            totalScore += $('option:selected', this).val();
        })
    
        $('#totaScore').text(totalScore);
    }

    $('.score').on('change', function () {
        sumSelectedScore();
    });

    sumSelectedScore();

解説　HTML

複数のプルダウンがある場合は、class属性に同じクラス名を設定します。（ここではscoreというクラス名を設定）
動的に合計得点を表示するために、liにid属性を設定します。（ここではtotalScoreというid名を設定）

解説　jQuery

html側で複数のプルダウンの同じクラス属性名を設定したので、each関数を使用することで同じクラス属性名を持つプルダウンの値を取得し、合計値を算出します。

    function sumSelectedScore() {
        let totalScore = 0;
    
        $('.score').each(function () {
            totalScore += $('option:selected', this).val();
        })
    
        $('#totaScore').text(totalScore);
    }

プルダウンで何かしらが選択されたら、上記で説明した sumSelectedScore() が呼ばれます。

    $('.score').on('change', function () {
        sumSelectedScore();
    });

参考
jQueryでthis option:selectedを取得する