Варианты выбора, измененные с помощью jquery, но странные результаты с 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));
        });

});

Ответ 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');

Ответ 2

Последний элемент в объекте js (homeOptions и businessOptions) не должен заканчиваться запятой. Вы можете использовать PHP для создания массива со всеми вычисленными элементами, а затем json_encode() для создания объекта javascript.

Ответ 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

Ответ 4

Я думаю, что ваша переменная "newOptions" находится внутри, если инструкция там для этой локальной переменной и не может получить доступ, - это злоупотребить попыткой вывести ее из инструкции 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));
            });
        }
});

Ответ 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>