Question

任何人都可以告诉我如何让下拉列表的输出超过一行吗？我有一个数组，其中包含一个名称列表，并且每个名称都有一个包含子项的列表，例如

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

＆＃13;

    <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>

＆＃13;

我想提供更多关于我所追求的例子。所以我有以下列表：

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

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

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

Answer 1

您应该将Link1更改为Link2，因为文字输入本身就是1行。此外，您的选项值必须是单个值，因此您可以执行以下操作，我将
和放入描述1的值中，并将其与{{ 1}}换行和value="Link1,Link2回车，以便将它们放在文本区域的不同行。

当然你也可以使用像select, textarea { vertical-align:top; }这样的值，并在javascript中使用replace方法替换换行符和回车符号。

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

<h1>
Scans
</h1>
<body ng-app="myApp" ng-controller="ScansController" >   
    <table id="scansTable" class="table table-striped">
        <thead>
            <tr>
                <th>ScanId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Time Stamp</th>
            </tr>
            <tr ng-repeat="scan in Scans">
                <td>
                    {{scan.scanId}}
                </td>
                <td>
                    {{scan.firstName}}
                </td>
                <td>
                    {{scan.lastName}}
                </td>
                <td>
                    {{scan.timeStamp}}
                </td>
            </tr>
        </thead>
    </table>

Answer 2

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

尼克

HTML下拉列表输出多行

2 个答案: