Javascript 使用2个选项进行简单计算

这是一个简单的表格，根据国籍和团队成员计算最终收费

我想确保所有的p&C都得到处理

如果同时设置了团队成员和国籍，则会显示费用值。但是，如果有人改变了任何人的价值，费用也应该改变

我对Java脚本了解很少

 <div class="form-group d-flex">
   <label><i class="fas fa-user" aria-hidden="true"></i></label>
   <select class="form-control" name="purpose" required="" id="toalp">
       <option value="">Number of Team Members</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
   </select>
</div>
<div class="form-group d-flex">
   <label><i class="fas fa-user" aria-hidden="true"></i></label>
       <select class="form-control" name="amount" required="" id="pnationality">
            <option>Show Nationality</option>
            <option value="Indian">Indian</option>
            <option value="Foreigner">Not an Indian</option>
        </select>
</div>
<div class="form-group d-flex">
  <label><i class="fas fa-user" aria-hidden="true"></i></label>
  <input class="form-control" type="text" placeholder="Fees " name="fees"  required="" id="finalamt">
</div>

Java script for calculations
$('#toalp').change(function () {
    if ($('#toalp option:selected').text() == "1"){num = 1; }
    if ($('#toalp option:selected').text() == "2"){num = 2; }
    if ($('#toalp option:selected').text() == "3"){num = 3; }
    if ($('#toalp option:selected').text() == "4"){num = 4; }
    console.log(num)
});

$('#pnationality').change(function () {
    if ($('#pnationality option:selected').text() == "Indian"){ cost = 100; }
    if ($('#pnationality option:selected').text() == "Not an Indian"){ cost = 200; }
    z = cost*num;
    $.each(res.project_modal, function (key, value) {
    $("#finalamt").val(value.z);
    // console.log(cost);
    console.log(z);
});

团队成员人数
1.
2.
3.
4.
显示国籍
印度的
不是印度人
用于计算的Java脚本
$（'#toalp'）。更改（函数（）{
if（$（'#toalp option:selected'）.text（）=“1”）{num=1；}
if（$（'#toalp option:selected'）.text（）=“2”）{num=2；}
if（$（'#toalp option:selected'）.text（）=“3”）{num=3；}
if（$（'#toalp option:selected'）.text（）=“4”）{num=4；}
console.log（num）
});
$（'#pnationality'）。更改（函数（）{
如果（$（'#pnationality option:selected'）.text（）==“Indian”）{cost=100；}
如果（$（'#国家选项：选中'）。text（）=“不是印度人”）{cost=200；}
z=成本*num；
$.each（res.project\u模式、功能（键、值）{
美元（“#finalamt”）.val（value.z）；
//控制台日志（成本）；
控制台日志（z）；
});

费用应显示团队成员和国籍的倍数。 每当字段ae更改时，它都会更改

请尝试以下操作：

$('#toalp').change(function () {
    calculation();
});

$('#pnationality').change(function () {
    calculation();
});

function calculation() {
    var num = 0;
    var cost = 0;
    if ($('#toalp option:selected').text() == "1"){num = 1; }
    if ($('#toalp option:selected').text() == "2"){num = 2; }
    if ($('#toalp option:selected').text() == "3"){num = 3; }
    if ($('#toalp option:selected').text() == "4"){num = 4; }

    if ($('#pnationality option:selected').text() == "Indian"){ cost = 100; }
    if ($('#pnationality option:selected').text() == "Not an Indian"){ cost = 200; }

    var z = cost*num;
    $("#finalamt").val(z);
}

---

下面是一个通过VueJS实现的示例。您可以参考此文档。
每个

输入

/

选择

都绑定到Vue数据，这得益于

v-model

指令：当DOM数据发生变化时，Vue数据会自动变化，反之亦然。
监视程序允许您在某些数据更改时指定回调（类似于jQuery事件，只是回调绑定到数据而不是DOM元素，这就是为什么它被称为数据驱动而不是事件驱动）

const-app=新的Vue({
el:“#应用程序”，
数据：{
托阿尔普：“，
民族性：''，
总成本：0
},
计算：{
parsedToalp（）{
返回parseInt（this.toalp）；
},
国家成本（）{
开关（此状态）{
“印第安人”一案：
返回100；
“外国人”一案：
返回200；
违约：
返回0；
}
}
},
观察：{
托阿尔普（）{
this.totalCost=this.nationalityCost
？this.parsedToalp*this.nationalityCost
: 0;
},
民族性（）{
this.totalCost=this.parsedToalp
？this.parsedToalp*this.nationalityCost
: 0;
}
}
})；

团队成员人数
1.
2.
3.
4.
显示国籍
印度的
不是印度人
您应该考虑使用像VueJS这样的前端框架（已经在LaaFrE中传输），它的数据驱动的方法使得Easyi这样的任务能够做到这一点。请您现在就来帮助这一点。谢谢您的建议。