根据选项标签创建不同的表单

create different forms based on option tag

本文关键字：表单 创建 选项 标签      更新时间：2023-09-26

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

我找不到一种方法来创建一个动态的表单，改变一个选项标签，没有空白或未定义的字段，也通过POST发送。换句话说，无论如何，我可以动态地改变字段，这样我就不必发送空白字段隐藏起来通过。hide()在javascript?我在这里设置了一个jsfiddle，在这里我可能会在不同的选项中遇到类似的字段，但在另一个选项中也会遇到完全不同的字段。

http://jsfiddle.net/boyilus/c0bdx8xL/

下面是我选择的一个示例，但不完全符合我的要求:(jsfiddle的完整版本)

$('#companies').change(function(){
   selection = $(this).val();    
   switch(selection)
   { 
       case 'Microsoft':
           $('#microsoftType').show();
            $('#appleType').hide();
            $('#googleType').hide();
            $('#otherType').hide();     
           break;
       ......
       ......
    }
 });

感谢所有的帮助!提前感谢!

试试这个:

$('#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移动到单独的功能中是很好的。

相关文章：