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> 

如何根據從下拉菜單中選擇的項目我修改字段？

默認項目將是「Person」。

如果我選擇「動物」，字段「名稱」，「年齡」，「關聯」將消失。將出現「寵物名稱」字段。

在此先感謝！

Answer 1

你被要求在這種情況下使用JavaScript我相信。在你的javascript文件中，編寫一個函數來決定選擇哪個dom。首先，您需要設置ID爲您的「選擇」標籤

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

創建要消失或再現

<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". 
} 

希望這幫助，謝謝！