Javascript 基于选项标记创建不同的表单

我不太确定如何命名这个主题来解决我的问题，所以如果这是一个重复的问题，我很抱歉，但这不是我想要的

我找不到一种方法来创建一个动态表单，在没有空白或未定义字段的情况下根据选项标记进行更改，该字段也可以通过POST发送。换句话说，我是否可以动态更改字段，这样就不必发送通过javascript中的.hide（）隐藏的空白字段？我在这里设置了一个JSFIDLE，其中有一个可能的场景，我可能会在不同的选项中遇到类似的字段，但在另一个选项中也会遇到完全不同的字段

下面是一个例子，说明我选择了什么，但没有完全做到我想要的：（JSFIDLE中的完整版本）

感谢所有的帮助！ 提前谢谢你

试试这个：

$('#companies').change(function(){
  selection = $(this).val();
  switch(selection) { 
    case 'Microsoft':
      $('#microsoftType').show().find('input, select, textarea').prop('disabled', false);
      $('#appleType, #googleType, #otherType').hide().find('input, select, textarea').prop('disabled', true);
      break;
   ......
   ......
  }
});

---

这利用了一个事实，即一旦提交表单，禁用的字段就不会发送到服务器。您可以重构上面的代码并使其更好，但这就是您可以如何实现的想法。

您可以通过将表单中的其他字段标记为

disabled

或

disabled=“disabled”

属性来禁用它们。来自这些控件的数据不会在请求中发送。如下所示：

switch(selection)
{ 
   case 'Microsoft':
       $('#microsoftType').show();
       $("#microsoftType input, #microsoftType textarea").removeAttr('disabled');
       $('#appleType').hide();
       $("#appleType input, #appleType textarea").attr('disabled', 'disabled');
       $('#googleType').hide();
       $("#googleType input, #googleType textarea").attr('disabled', 'disabled');
       $('#otherType').hide();
       $("#otherType input, #otherType textarea").attr('disabled', 'disabled');
           break;
       ......
       ......
}

当然，最好将这些

hide/attr

和

show/removeAttr

移动到单独的函数中。希望能有帮助

switch(selection)
{ 
   case 'Microsoft':
       $('#microsoftType').show();
       $("#microsoftType input, #microsoftType textarea").removeAttr('disabled');
       $('#appleType').hide();
       $("#appleType input, #appleType textarea").attr('disabled', 'disabled');
       $('#googleType').hide();
       $("#googleType input, #googleType textarea").attr('disabled', 'disabled');
       $('#otherType').hide();
       $("#otherType input, #otherType textarea").attr('disabled', 'disabled');
           break;
       ......
       ......
}