Question

拼凑一个表单，第一个下拉菜单中的选项会影响第二个下拉菜单中显示的选项。

脚本：

$(document).ready(function(){
$('#sashcolour').on('change', function() {
  if($(this).val() === "Emerald"||
     $(this).val() === "Hot Pink"||
     $(this).val() === "Red")
  {
    $("#printall").show().prop('disabled', false);
  }
  else
  {
    $("#printall").hide().prop('disabled', true);
  }
  if($(this).val() === "White"||
     $(this).val() === "Baby Pink"||
     $(this).val() === "Baby Blue")
  {
    $("#printlight").show().prop('disabled', false);
  }
  else
  {
    $("#printlight").hide().prop('disabled', true);
  }
  if($(this).val() === "Black"||
     $(this).val() === "Royal Blue"||
     $(this).val() === "Purple")
  {
    $("#printdark").show().prop('disabled', false);
  }
  else
  {
    $("#printdark").hide().prop('disabled', true);
  }
});

}）;

http://jsfiddle.net/zttjqw6g/

我的问题是，如果表单已提交，然后用户通过浏览器返回按钮返回，则第一个下拉列表会保留在打开的项目上，但第二个下拉列表将恢复为默认值。例如，下拉1 - 用户选择“黑色”并在下拉列表2中看到以下选项 - “白色”，“金色”，“银色”。但是...当提交表单并且用户按下后退按钮时，下拉菜单1显示“黑色”，但下拉菜单2显示“黑色”，“金色”，“银色”是第一个选项列表。

我的知识非常有限，只是看不出我做错了什么。任何帮助都感激不尽！

Answer 1

您的JS需要在页面加载时执行以检索正确的值。要执行此操作，请在事件侦听器之后添加.change()来触发更改：

$(document).ready(function(){
    $('#sashcolour').on('change', function(){
        /* ... */
    }).change();
});

页面返回表单选项不匹配

1 个答案: