javascript - 当页面加载时由 URL 参数自动填充字段时，Javascript 价格计算器不起作用

Question

我有一个价格计算器在更改下拉字段时工作，但是当通过 URL 参数自动选择下拉列表时，计算器不会更新。

我尝试了多种方法，但我只会向您展示更改事件的工作代码

<script type="text/javascript">
function calcTotal() {
var monthlyBB = document.getElementById("monthly_package").innerHTML.replace(/\D/g,'');
var installBB = document.getElementById("install_package").innerHTML.replace(/\D/g,'');

}

<script type="text/javascript"> 
document.getElementById("selected_package").onchange = function() { 
    var v=this.value; 

    if('Select Package' === v) {
        document.getElementById("install_package").innerHTML = "&pound;0";
                    document.getElementById("monthly_package").innerHTML = "&pound;0";
        calcTotal();

    } else if('product1' === v) {
        document.getElementById("install_package").innerHTML = "&pound;40";
        document.getElementById("monthly_package").innerHTML = "&pound;28";
        calcTotal();

    } else if('product2' === v) {
        document.getElementById("install_package").innerHTML = "&pound;40";
        document.getElementById("monthly_package").innerHTML = "&pound;35";
        calcTotal();

    }    else if('product3' === v) {
        document.getElementById("install_package").innerHTML = "&pound;40";
        document.getElementById("monthly_package").innerHTML = "&pound;45";
        calcTotal();

    }     else if('product4' === v) {
        document.getElementById("install_package").innerHTML = "&pound;20";
        document.getElementById("monthly_package").innerHTML = "&pound;65";
        calcTotal();

    }   
}

Osama 在评论中创建了另一种脚本形式

document.getElementById("selected_package").onchange = function () {
var installPackagePrice, monthlyPackagePrice;

switch (this.value) {
  case "Select Package":
    installPackagePrice = 0;
    monthlyPackagePrice = 0;
    break;
  case "product1":
    installPackagePrice = 40;
    monthlyPackagePrice = 28;
    break;
  case "product2":
    installPackagePrice = 40;
    monthlyPackagePrice = 35;
    break;
  case "product3":
    installPackagePrice = 40;
    monthlyPackagePrice = 45;
    break;
  case "product4":
    installPackagePrice = 20;
    monthlyPackagePrice = 65;
    break;
}

document.getElementById("install_package").innerHTML = "£" + installPackagePrice;
document.getElementById("monthly_package").innerHTML = "£" + monthlyPackagePrice;

/*calcTotal();*/

}

标签： javascript

Answer 1

您是否尝试过使用 jquery？Jquery 库通常使用下面的代码涵盖所有更改事件。

$(document).ready(function(){
    $('#selected_package').change(function(){
       var v=$(this).val(); 

    if('Select Package' === v) {
        document.getElementById("install_package").innerHTML = "£0";
        document.getElementById("monthly_package").innerHTML = "£0";
        calcTotal();

    } else if('product1' === v) {
        document.getElementById("install_package").innerHTML = "£40";
        document.getElementById("monthly_package").innerHTML = "£28";
        calcTotal();

    } else if('product2' === v) {
        document.getElementById("install_package").innerHTML = "£40";
        document.getElementById("monthly_package").innerHTML = "£35";
        calcTotal();

    }    else if('product3' === v) {
        document.getElementById("install_package").innerHTML = "£40";
        document.getElementById("monthly_package").innerHTML = "£45";
        calcTotal();

    }     else if('product4' === v) {
        document.getElementById("install_package").innerHTML = "£20";
        document.getElementById("monthly_package").innerHTML = "£65";
        calcTotal();

    }  
    });
});

您也可以在发生自动更改时触发更改事件。

$('#selected_package').trigger('change');