<select> 标签在 style="display:none;" 时发布所有数据

Question

当我选择显示相关子类别的任何主要类别时，我有产品的主要类别和子类别。但是当我发布表单时，它会发布最后一个子类别值而不是选定的子类别值。

JavaScript 代码

   $(function() {
    $('#category').change(function(){
        $('.sub-category').hide();
        $('#' + $(this).val()).show();
    });
});

HTML 代码

 <Select id="category" name="product_category">
  <option value="eco">Main Category 1</option>
 <option value="organic">Main Category 2</option>
  </Select>

  <Select name="product_sub" id="eco" class="sub-category">
  <option value="eco1">Sub Category 1</option>
  <option value="eco2">Sub Category 2</option>
   </Select>

<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
  <option value="organic1">Sub Category 3</option>
   <option value="organic2">Sub Category 4</option>
 </Select>

例如：当我选择子类别 1 时，它的发布值是子类别 3

Answer 1

所有成功的表单域都提交给服务器。 CSS display 不会影响表单字段是否被视为成功。 The HTML spec defines what makes a control successful.

成功的控件对于提交是“有效的”。每一个成功的 控件将其控件名称与其当前值配对，作为 提交的表单数据集。必须定义成功的控件 在 FORM 元素中，并且必须有一个控件名称。

但是：

• 禁用的控件无法成功。
• 如果一个表单包含多个提交按钮，只有激活的提交按钮是成功的。
• 所有“打开”复选框都可能成功。
• 对于具有相同 name 属性值的单选按钮，只有“on”单选按钮可能成功。
• 对于菜单，控件名称由 SELECT 元素提供，值由 OPTION 元素提供。只有选定的选项可能是 成功的。未选择任何选项时，控件不 成功并且名称和任何值都不会提交给 提交表单时的服务器。
• 文件选择的当前值是一个或多个文件名的列表。提交表单后，每个文件的内容是 与其余的表单数据一起提交。文件内容是 根据表单的内容类型打包。
• 对象控件的当前值由对象的实现决定。

如果提交表单时控件没有当前值， 用户代理不需要将其视为成功的控件。

此外，用户代理不应考虑以下控件 成功：

• 重置按钮。
• 声明属性已设置的 OBJECT 元素。

隐藏控件和因样式而未渲染的控件 工作表设置可能仍然成功。

Disable你不想提交的表单域。

$('#category').change(function(){
    $('.sub-category').hide().prop('disabled', true);
    $('#' + $(this).val()).show().prop('disabled', false);
});