HTML 下拉列表输出多行答案

【问题标题】：HTML drop down list output multilineHTML 下拉列表输出多行
【发布时间】：2016-09-06 16:25:10
【问题描述】：

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

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

    <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 中值是一个单词的地方，我希望该值是一个单词列表。

【问题讨论】：

您希望下拉项根据初始输入选择进行更改吗？
在上面的示例中，如果您从下拉列表中选择“description 1”，它将显示“link1”作为输出。我希望它以列表形式显示“Link1”、“link2”等。
您可以运行上面的代码，然后从下拉框中选择图像而不是输出一行，它是“链接”列表

标签： html

【解决方案1】：

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

当然，您也可以使用 value="Link1,Link2 之类的值，并根据需要使用 javascript 中的 replace 方法将逗号换成换行符和回车符。

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>

【讨论】：

谢谢你，这正是我想要的。
最后一件事，是否可以让输入框与顶部对齐。目前它与文本区域的左下角对齐。我真的希望它与左上角对齐。
是的，使用 CSS，您可以将 vertical-align:top 应用于这两个元素。运行上面的sn-p。

【解决方案2】：

您可以在 bootstrap 的下拉菜单中使用下拉菜单。
here 是指向作者执行相同操作的帖子的链接。
它基本上是列表中的列表，您不再使用选择选项。确保您在 HTML 中导入了引导程序，它应该可以工作。
要获取下拉列表的值，只需使用 Jquery 遍历每个 <li> 并检查所选的。
希望对您有所帮助！

尼克

【讨论】：