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

您遇到的问题不一定是代码，而且实际上并不是问题＆＃34;用Chrome。事实上，Firefox的表现可能超过它应该＆＃39;。发生什么事情就是当你走了回来的时候，firefox会根据它记得的内容重新选择你的选项（为了便于浏览器用户使用）。当firefox执行此操作时，它会查找＆＃34;更改＆＃34;事件，并解雇他们。 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对象。

Answer 3

网站上存在一些问题，您将 #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 （未找到） - ＆gt; kingsberryfuels.com/js/jquery.js

Answer 4

我认为你的“newOptions”变量在if 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));
            });
        }
});

Answer 5

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

DEMO

    <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>

选项上的选项随jquery一起更改但Chrome浏览器

5 个答案: