使用JavaScript实现表单同步变化。首先,在HTML中设置下拉菜单,用于选择类别:
接着,添加表单元素和对应的类别:
CSS中隐藏除选中类别对应的表单元素之外的所有表单元素:
#form-inputs div {
display: none;
}
#form-inputs div[class^="form-input"][class*="option1"] {
display: block;
}
#form-inputs div[class^="form-input"][class*="option2"] {
display: block;
}
#form-inputs div[class^="form-input"][class*="option3"] {
display: block;
}
最后,在JavaScript中根据所选类别显示对应的表单元素:
document.getElementById("category-select").addEventListener("change", function() {
var category = this.value;
var formInputs = document.querySelectorAll("[class^='form-input']");
for (var i = 0; i < formInputs.length; i++) {
var formInput = formInputs[i];
if (formInput.classList.contains(category)) {
formInput.style.display