Jqueryでselect選択による自動計算システムを作りたい

２つのselectで取得したそれぞれのvalueの値によって合計額をだす動的なシステムを作りたいです。
書き方がひとつひとつif文でまわすやり方しかわからず、他にもあるのでは？と思いご教授願いにきました。

★25kmは10000円
★50kmは50000円
★100kmは100000円

☆初回は10000円
☆二度目以降は0円

html
1                        <select id="select-distance" >
2                            <option value="0">25km以内</option>
3                            <option value="1">50km以内</option>
4                            <option value="2">100km以内</option>
5                        </select>
6                        <select id="select-status">
7                            <option value="0">初回利用</option>
8                            <option value="1">2回目以降</option>
9                        </select>
10                    </div>
11                    <div>
12                        <div>
13                            <p>入会金</p>
14                            <p id="select-cost">〜〜〜ここに選択したものが出力〜〜〜</p>
15                        </div>
16                    </div>
17                </div>
18                <div class="total-box">
19                    <div class="total-left">
20                        合計
21                    </div>
22                    <div id="select-total">
23　　　　　　　　　　　　　　〜〜〜ここに選択したものが出力〜〜〜
24                    </div>
25                </div>

js
1function keisan() {
2    var distance = $('#select-distance').val();
3    var status = $('#select-status').val();
4    console.log(distance, status);
5
6    $("#total-right").on("change", function () {
7        if (distance === 0 && status === 0) {
8            $("total-right").text("20,000円");
9        } else if (distance === 1 && status === 0) {
10            $("total-right").text("60,000円");
11        } else if (distance === 2 && status === 0) {
12            $("total-right").text("110,000円");
13        } 
14　　　　　　::::::::::::::省::::::::::::::
15    });
16}
17

m.ts10806

2019/07/24 09:32

タグの「PHP」はどのように関係するのでしょうか。直接関係ないのでしたら外しておいたほうが良いかと思います

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<select id="select-distance" >
2    <option value="10000">25km以内</option>
3    <option value="50000">50km以内</option>
4    <option value="100000">100km以内</option>
5</select>
6<select id="select-status">
7    <option value="10000">初回利用</option>
8    <option value="0">2回目以降</option>
9</select>
10<p id="select-cost"><!-- ここに選択したものが出力 --></p>
11
12
13<script>
14$(function(){
15    $('#select-distance,#select-status'.on('change',function (){
16        let distance_val = parseInt($('#select-distance').val());
17        let status_val = parseInt($('#select-status').val());
18        $('#select-cost).text(
19            (distance_val + status_val).toLocaleString() + '円'
20        );
21    });
22});
23</script>