基於所選輸入值更改輸入字段的表格

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; 
    } 
});