根据所选输入值更改输入字段的表单

Question

我需要开发一个Web表单，用户可以在其中选择一个类别，并根据类别显示新的输入字段。我知道这与javascript有关。我查看了github和stackoverflow。但找不到合适的答案。

我的要求以简单的方式

transacton表格

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

2选择角色：buyer . / seller，

3）输入其他可能的电子邮件：

4）支付托管费用：buyer, seller, both

5）检查时间：1-30 days

6）交易标题：

7）MERCHANDISE / VEHICLE ESCROW

ADD SHIPPING.
who pays for shipping

8）

Domain ESCROW（可以添加多个托管）

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

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

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

}

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

Answer 2

因此，将所有顶级类别放入select元素，然后检查何时使用jQuery选择一个，然后显示该类别的输入（使用CSS显示全部隐藏它们：无首先）：

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

Answer 3

如果您使用的是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