使用 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>
</fieldset>

如何根据从下拉列表中选择的项目修改字段？

默认项目为“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

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

希望对您有所帮助，谢谢！