选项上的选项随着jquery而改变,但Chrome的结果很奇怪

Question

我有这个网站 - http://kingsberryfuels.com/ - 如果您访问Chrome浏览器并选择瓦斯油作为燃料类型然后使用jquery我正在更改下面选择的选项.如果你有家用取暖油,你可以选择很多选择,而不是使用瓦斯油.

无论如何,当我选择瓦斯油并选择其中一个有限的选项然后点击进入下一页,如果我然后点击后退按钮,当我回到上一页时,我看到燃料类型仍然是瓦斯油,但是数量选择中的选项不是正确的限制选项.

这只发生在Chrome中,Firefox的一切都像我期望的那样.谁能帮我吗？

我正在使用的js/php是:

var homeOptions = {
        <?php foreach($oilHome as $liter) {
                echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
        }?>
};
var businessOptions = {
        <?php foreach($oilOil as $liter) {
                echo '"'.$liter['litres'].'": "'.$liter['litres'].'",';
        }?>
};
$("#fueltype").change(function() {
        var $el = $("#quantity");
        var fueltype = $("#fueltype").val();
        if(fueltype == 'Home Heating Oil') {
                var newOptions = homeOptions;
        } else {
                var newOptions = businessOptions;
        }
        $el.empty(); // remove old options
        $.each(newOptions, function(key, value) {
          $el.append($("<option></option>")
                 .attr("value", value).text(key));
        });

});

Answer 1

您遇到的问题不一定是代码,而且实际上并不是Chrome的"问题".事实上,Firefox的表现可能超过"应该".发生的事情就是当你"退回"时,firefox会根据它记得的内容重新选择你的选项(为了浏览器用户的易用性).当firefox执行此操作时,它会查找"更改"事件并触发它们.Chrome没有.只需在函数中添加一个触发器,即可在页面首次加载时强制进行更新.

$("#fueltype").change(function() {
    var $el = $("#quantity");
    var fueltype = $("#fueltype").val();
    if(fueltype == 'Home Heating Oil') {
            var newOptions = homeOptions;
    } else {
            var newOptions = businessOptions;
    }
    $el.empty(); // remove old options
    $.each(newOptions, function(key, value) {
      $el.append($("<option></option>")
             .attr("value", value).text(key));
    });

}).trigger('change');

Answer 2

js 对象中的最后一项（homeOptions 和businessOptions）不应以逗号结尾。您可以使用 PHP 创建一个包含所有计算项的数组，然后使用 json_encode() 创建 JavaScript 对象。