Javascript a栋'；灵活/灵敏'；表单的选择/选项字段

我试图构建一个复杂的表单，其中包含“灵活”的选择/选项元素，以便于使用，根据用户的选择，这些元素应该只显示它们自己。换句话说，如果用户在一个

组中选择了某个选项，那么新的选项集应该在第二个

组中显示出来。我的情况比这复杂一点，但这是对其行为的总结

然而，我想要一个比我现在拥有的更好的界面；也就是说，我希望表单能够得到支持，并且在浏览器之间实现理想的统一

---

我有一个特殊的

元素（我们称这个元素为“selectA”），它有一个各种选项的列表，即“optionA-1”、“optionA-2”和“optionA-3”

我还有另一个

元素，称为“selectB”，它只有在选择了“optionA-1”或“optionA-3”时才会显示出来selectB'还有四个其他选项，辛辣地命名为'optionB-1'、'optionB-2'、'optionB-3'，当然还有'optionB-4'

让“selectB”随意消失和重新出现是一种惯例——只是一点点JS和一种“神奇”的响应形式

然而，这里有一个挑战：只有在选择了“optionA-3”时，“optionB-3”和“option-B-4”才应该可见；否则，不应显示它们。

这并不是说我不能做到这一点，但我想要一个简洁的设计（即不需要过多的空格），并且不太依赖JavaScript（因为用户可以随意启用或禁用它，我不希望核心功能被破坏）

以下是表格的大致结构，如下所示：

---选一个---
选择A-1
选择A-2
选择A-3
---选择另一个---
选项B-1
选项B-2
选项B-3
选项B-4

看起来很简单，对吧？好的，现在让JavaScript函数使“selectB”更“灵活/响应”（这意味着它位于

元素的同一个文件中）：

---选一个---
选择A-1
选择A-2
选择A-3
---选择另一个---
选项B-1
选项B-2
选项B-3
选项B-4

一个选项是添加

隐藏属性，而不是更改组件的可见性

所以这一行：

options[i].style.display = ""; //Now you see me...

options[i].style.display = "none"; //...Now you don't

会变成这样吗

options[i].removeAttribute("hidden"); //Now you see me...

options[i].setAttribute("hidden", ""); //Now you don't


这一行：

options[i].style.display = ""; //Now you see me...

options[i].style.display = "none"; //...Now you don't

会变成这样吗

options[i].removeAttribute("hidden"); //Now you see me...

options[i].setAttribute("hidden", ""); //Now you don't

参考资料：


浏览器兼容性：
因此，在当今的web设计/开发环境中，“响应性”一词已经严重超载，当你谈到“过多的空间”时，有点不清楚你在说什么。如果您可以在这里创建一个关于堆栈溢出的示例，我们可以运行它并准确地看到您所说的内容，那将是一件好事。虽然这是更改显示的另一种解决方案，但仍然存在两个问题：1）我想您有两个问题
options[i].removeAttribute（“隐藏”）
显示文本，而
options[i].setAttribute（“隐藏”）
隐藏文本，2）在Edge上的“selectB”中仍显示空白，而在Firefox和Chrome上则不显示。哎呀，我的坏消息。对不起，我倒过来了！（刚刚更新了答案）由于浏览器兼容性，我认为这在Edge上可以正常工作：（我认为浏览器与Edge的兼容性问题仍然存在的原因不是因为
隐藏的
属性，而是因为JavaScript方法
removeAttribute（）
和
设置属性（）
；例如