我有这个网站 - 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").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语句中，因为这是本地变量而无法访问是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));
});
}
});
@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>