選擇選項更改與jquery但奇怪的結果與鉻

Question

我有這個網站 - http://kingsberryfuels.com/ - 這，如果你訪問鉻瀏覽器，並選擇瓦斯油作爲燃料類型，然後用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

在JS對象（homeOptions和businessOptions）中的最後一項不應該用逗號結束。您可以使用PHP創建一個包含所有計算項目的數組，然後使用json_encode（）創建JavaScript對象。

Answer 2

您遇到的問題不一定是代碼，它實際上不是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 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

Answer 4

我認爲你的「newOptions」變量在if語句裏面，因爲這是局部變量，不能訪問是gloabaly嘗試使它出現在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>