基于所选输入值更改输入字段的表格

Question

我需要开发一个Web表单，其中用户选择一个类别并根据类别出现新的输入字段。我知道这与JavaScript有关。我看着github和stackoverflow。但找不到合适的答案。

我用简单的方式要求

transacton形式

1）选择字段：domain, merchandise, vehicle

2选择角色：buyer ./seller，

3）输入其他pary电子邮件：

4 ）谁支付代管费：buyer, seller, both

5）检查的长度：1-30 days

6）事务标题：

7）MERCHANDISE/VEHICLE ESCROW

ADD SHIPPING. 
who pays for shipping 

8）

域名中介（多于一个中介可以add）

enter domain name 

enter price 

9）

商品ESCROW（更项目可同时加入）

item name 
quantity 
price 
description 
shipping fee 

10）

车辆ESCROW

vehicle year 
vehicle make 
modal 
price 

用户必须输入VIN, odometer, notes, registration expiration date, state titled, state registered,并且可以包括一个fee选项运输。

shipping fee 

至于我，当用户选择vehicle escrow提到的，出现了vehicle escrow需求的领域，我试图做到这一点使用，的getElementById和innerHTML的，它似乎很复杂。

另外，某些字段需要添加多个时间。我看着追加 JQuery为此，但仍然没有线索。

如果有人能帮助我这方面，我会很高兴。

请确认下面的链接。它具有根据所选项目而变化的形式。

http://ikman.lk/en/new

感谢。

Answer 1

在这种情况下，您可以使用下面的逻辑。另请参阅下面的URL，了解如何使用jquery显示/隐藏内容。

if(domain is selected){ 
    hideEveryThing(); 
    shopwSomeThing(); 

} 

http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 2

如果您使用JavaScript，那么你可以一起去：

document.getElementById("divid").style.display="none"; //To hide div 
document.getElementById("divid").style.display="block"; //To show div 

如果您使用jQuery则：

$("#divid").hide(); //To hide div 
$("#divid").show(); //To show div 

OR

$('#divid').css({'display':'none'}); //To hide div 
$('#divid').css({'display':'block'}); //To show div 

Answer 3

所以，把你所有的顶级类别为选择元素，然后检查时使用jQuery选择一个，然后显示该类别的输入（隐藏它们全部用CSS显示：第一无）：

$('select').change(function(){ 
    if ($(this).val() == ' Category Name ') { 
     show the inputs for this category; 
    } 
});