jquery改变了选择上的选项，但Chrome却出现了奇怪的结果 - Options on a select changed with jquery but strange results with Chrome

我有这个网站-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));
        });
});

您遇到的问题不一定是代码，实际上也不是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');

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

网站上有一些问题，您将元素#fueltype与很多东西绑定在一起。我尝试使用：

$("#fueltype").unbind().on('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));
        });
});

这似乎奏效了。但请在您的网站上修复此错误：

未能加载资源：服务器响应，状态为404（未找到）-->kingsberryfuels.com/js/jquery.js

我认为您的"newOptions"变量在if语句内部，因为这是局部变量，无法访问。请尝试将其放在if语句之外。

试试这个

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

@RefutingLogic提到的答案是行为背后的真正原因。但是，您在数量下拉框中提到默认选项的方式也是一个问题。所以，如果我是你，我会做如下所示。这是plnkr的链接。

演示

    <div class="select">
        <div class="label">
          <span>Choose your fuel type:</span>
        </div>
        <div class="field">
          <select name="fueltype" id="fueltype">
            <option value="Select">select</option>
            <option value="Home Heating Oil">Home Heating Oil</option>
            <option value="Gas Oil">Gas Oil</option>
          </select>
        </div>
        <div style="clear: both;"></div>
      </div>
      <br />
      <br />
      <div class="select">
        <div class="label">
          <span>Select your quantity:</span>
        </div>
        <div class="field">
          <select name="quantity" id="quantity">
            <option value="0">select</option>
          </select>
        </div>
        <div style="clear: both;"></div>
      </div>
    <script type="text/javascript">
  //if user changes from home oil to business
  var homeOptions = {
    "100": "100",
    "150": "150",
    "200": "200",
    "250": "250",
    "300": "300",
    "350": "350",
    "450": "450",
    "500": "500",
    "600": "600",
    "675": "675",
    "700": "700",
    "800": "800",
    "900": "900",
    "1000": "1000",
    "1100": "1100",
    "1125": "1125",
    "1200": "1200",
    "1300": "1300",
    "1350": "1350",
    "1575": "1575",
    "1800": "1800",
    "2025": "2025",
    "2250": "2250"
  };
  var businessOptions = {
    "450": "450",
    "900": "900",
    "1350": "1350",
    "1800": "1800",
    "2250": "2250"
  };
  var selectOptions = {
    "Select": "0"
  };
  $("#fueltype").change(function() {
    var $el = $("#quantity");
    var fueltype = $("#fueltype").val();
    if (fueltype == 'Home Heating Oil') {
      var newOptions = homeOptions;
    } else if (fueltype == 'Gas Oil') {
      var newOptions = businessOptions;
    } else if (fueltype == 'Select') {
      var newOptions = selectOptions // remove old options
    }
    $el.empty(); // remove old options
    $.each(newOptions, function(key, value) {
      $el.append($("<option></option>")
        .attr("value", value).text(key));
    });
  });

</script>