使用jQuery更改选择框选项，但在Chrome中出现奇怪的结果。

Question

我有这个网站 - http://kingsberryfuels.com/ - 如果您在Chrome浏览器上访问并选择汽油作为燃料类型，那么使用jQuery我正在更改下面select中的选项。如果您选择家庭供暖油，则可以选择很多选项，但汽油没有这样的选项。

无论如何，当我选择汽油并选择有限选项之一然后单击转到下一页时，如果我然后点击返回按钮，当我回到前一页时，我看到燃料类型仍是汽油，但数量选择的选项不正确。

这只会在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));
        });

});

- Zaphod Beeblebrox

---

我看不到问题。。https://www.dropbox.com/s/vdeblok0k3yctct/video.webm?dl=0 - Mosh Feu

在处理这个问题之前，请先解决您网站上的问题：无法加载资源：服务器响应状态为404（未找到） --> http://kingsberryfuels.com/js/jquery.js - Vixed

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');

- Refuting logic

---

此外，如果您希望Chrome在页面之间记住某些内容，您需要在值更改时设置一个cookie或其他东西。然后检查并设置它，我认为这将产生与.trigger('change')相同的效果。如果它没有触发，请升级jquery（以前在旧版本的jquery上有触发问题）。如果仍然无法触发，则手动调用.trigger。 - flcoder

由于“newOption”变量在if语句中，因此它是局部变量，无法在if语句外使用，所以这个逻辑是错误的。 - Ankit Kathiriya

Answer 2

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

- wouter

---

我尝试过了，但不幸的是没有任何改变 :( - Zaphod Beeblebrox

我仍然有这个问题 - 有人能帮我吗？ - Zaphod Beeblebrox

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（未找到）-> kingsberryfuels.com/js/jquery.js

- Vixed

Answer 4

我认为你的“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));
            });
        }
});

- Ankit Kathiriya

---

你是对的。主要问题是访问了作用域外的本地变量“newOptions”。 - Parth Trivedi

@Zaphod请检查"newOptions"的作用域。如果条件允许，请将其声明在外部。 - Parth Trivedi

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>

- Isaiah4110