Dinamic Выпадающее Меню Html

Question

У меня есть этот код в HTML:

<fieldset id="fsItem"> 
       <legend>Item &nbsp;&nbsp;&nbsp; 
        <button id="bAnt"><</button> 
        <input type="text" class="input" id="idItem" value="0" disabled> 
        <button id="bNex">></button> 
        <button id="bAdd">+</button> 
        <button id="bRem">&ndash;</button> 
       </legend> 
       <label>Item</label> 
        <select> 
         <option value="person">Person</option> 
         <option value="vehicle">Vehicle</option> 
         <option value="animal">Animal</option> 
        </select> 
       <p><label>Name</label> 
       <input type="text" class="input" id="nameItem" value="" disabled> 
       <p><label>Age</label> 
       <input type="text" class="input" id="ageItem" value="" disabled> 
       <label id="lbAs">Associate</label> 
       <input type="checkbox" class="input" id="chkAs" value=""></p> 
       <p><label>Details</label> 
       <textarea class="input" id="detailsItem" rows=5 disabled></textarea></p> 

Как я могу изменить поля в соответствии с пунктом выбранного из выпадающего списка?

Элемент по умолчанию будет «Человек».

Если я выберу «Животное», поля «Имя», «Возраст», «Связывание» исчезнут. Появится поле «Pet Name».

Заранее благодарен!

Answer 1

Вы должны использовать javascript в этой ситуации, я верю. В вашем файле javascript напишите функцию, определяющую, какой из них выбран. Во-первых, вам нужно установить идентификатор для «выберите» тег

  ...<select id="typeB"> 
       <option value="person">Person</option> 
       <option value="vehicle">Vehicle</option> 
       <option value="animal">Animal</option> 
      </select>... 

создать DIV для каждой категории, которые вы хотите исчезают или появляются

<div id="petName"> 
<p><label>Pet Name</label> 
<input type="text" class="input" id="nameItem" value="" display="none"> 
</div 

Прикладной это всем остальным категориям. Сделайте все свойства отображения Div категорий, равняется на «нет» Наконец, в вашем файл JavaScript, искать выбранный элемент пользователя, следуя

if (document.getElementByID("typeB").value == "animal") { //if animal is being selected 
    document.getElementByID("petName").style.display = "block"; // if your PetName field's id is petName 
    ... // write some code that will make the rest of categories that you want to hide has display properties of "none" (same way as when you set display properties to "block". 
} 

Надежда этой помощь, спасибо!