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>

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

默认项目为“人物”。

如果我选择“动物”，“名称”，“年龄”，“关联”字段将消失。将出现“宠物名称”字段。

提前致谢！

Answer 1

我相信你需要在这种情况下使用javascript。在您的javascript文件中，编写一个函数来确定所选的dom。首先，您需要为“select”标签设置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类别的显示属性等于“none” 最后，在您的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".
}

希望有这个帮助，谢谢！

Dinamic下拉菜单Html

1 个答案: