当style ="display:none;"时,<select>标记发布所有数据

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不会影响表单字段是否被视为成功. HTML规范定义了控件成功的原因.

成功的控制对于提交是"有效的".每个成功的控件都将其控件名称与其当前值配对,作为提交的表单数据集的一部分.必须在FORM元素中定义成功的控件,并且必须具有控件名称.

然而:

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

如果控件在提交表单时没有当前值,则用户代理不需要将其视为成功控件.

此外,用户代理不应该认为以下控件成功:

• 重置按钮.
• 已设置declare属性的OBJECT元素.

由于样式表设置而未呈现的隐藏控件和控件仍可能成功.

禁用您不想提交的表单字段.

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