Форма, которая меняет поля ввода на основе выбранного входного значения

Question

Мне нужно разработать веб-форму, в которой пользователь выбирает категорию и на основе категории появляются новые поля ввода. Я знаю, что это связано с javascript. Я просмотрел github и stackoverflow. Но не смог найти правильный ответ.

Мое требование простым способом

форма transacton

1) Выберите поле: domain, merchandise, vehicle

2Выберите роль: buyer ./seller,

3) Введите другой Pary адрес электронной почты:

4), который платит условное депонирование: buyer, seller, both

5) длина проверки: 1-30 days

6) заголовка транзакции:

7) СУВЕНИРЫ/ТРАНСПОРТНОЕ СРЕДСТВО ESCROW

ADD SHIPPING. 
who pays for shipping 

8)

домена 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, это кажется довольно сложным.

Плюс, некоторые поля должны добавлять более одного раза. Я посмотрел на append 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 

ИЛИ

$('#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; 
    } 
});