HTML 下拉列表输出多行

Question

谁能告诉我如何让下拉列表的输出超过一行？
我有一个数组，其中包含一个名称列表，并且针对每个名称列出例如有子项的列表

我希望用户能够通过下拉列表选择一个名称，然后它显示有孩子的列表

    <form name="form" onsubmit="CheckForm()">
        <select name="myOptions" onchange="document.form.showValue.value=this.value">
        <option value="">Select a link</option>
            <option value="Link1","link2">Description1</option>
            <option value="Link2">Description3</option>
            <option value="Link3">Description3</option>
            <option value="Link4">Description4</option>
        </select>
        <input type="text" name="showValue">
    </form>  

我想举更多的例子来说明我所追求的。所以我有以下列表：

汽车=福特，道奇，菲亚特水果=苹果香蕉，橙子颜色 = 红色、橙色、绿色

我想要一个下拉列表，我可以从中选择"汽车"，"水果"，"颜色"。在下拉列表中选择一个时，结果在右侧窗格中显示为列表。

所以我不是在寻找多个级别的下拉列表，只是一个下拉列表，但是在 HTML 中值是单个单词的地方，我希望该值是单词列表。

Answer 1

您可能应该将input更改为textarea，因为文本输入本质上是 1 行。此外，您的选项值必须是单个值，因此您可以执行以下操作，我将Link1和Link2放在描述 1 的值中，并用
换行符和
回车符将它们分隔，以便将它们放在文本区域中的不同行上。

当然，你也可以使用像value="Link1,Link2这样的值，如果你愿意，可以使用javascript中的替换方法来换掉换行和回车符的逗号。

select,
textarea {
  vertical-align:top;
}

<form name="form" onsubmit="CheckForm()">
        <select name="myOptions" onchange="document.form.showValue.value=this.value;">
        <option value="">Select a link</option>
            <option value="Link1&#13;&#10;link2">Description1</option>
            <option value="Link2">Description3</option>
            <option value="Link3">Description3</option>
            <option value="Link4">Description4</option>
        </select>
        <textarea name="showValue"></textarea>
    </form>

或者，如果我误解了，您只想在文本输入中出现一个逗号分隔的单词列表，而它们不在不同的行上，那么只需更改您的原始代码，并将第一个选项更改为：

<option value="Link1,link2">Description1</option>

Answer 2

您可以在引导程序的下拉列表中使用下拉列表。
这是作者做同样事情的帖子的链接。
它基本上是一个列表中的列表，您不再使用选择选项。确保你在HTML中导入了引导程序，它应该可以工作。
要获取下拉列表的值，只需使用 Jquery 浏览每个<li>并检查所选。
希望对您有所帮助！

• 网卡