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

Question

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

我的要求很简单

交易形式

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

2选择角色：buyer . / seller,

3）输入其他邮箱：

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

5) 检验长度：1-30 days

6) 交易标题：

ADD SHIPPING.
who pays for shipping

8)

enter domain name

enter price

9)

item name
quantity
 price
description
shipping fee

10)

vehicle year
vehicle make
 modal
price

用户可以选择输入VIN, odometer, notes, registration expiration date, state titled, state registered,，并且可以包含fee用于运输的选项。

shipping fee

正如我在用户选择时提到的，需要出现vehicle escrow的字段，我尝试使用getElementById 和 innerHTML来做到这一点，这似乎很复杂。vehicle escrow

另外，某些字段需要添加多次。我为此查看了附加JQuery，但仍然没有任何线索。

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

请检查下面的链接。它有一个表单，它会根据所选项目进行更改。

谢谢。

score 1 · Accepted Answer

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

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

}

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

或者

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