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

希望这帮助，谢谢！