Javascript - 在文本内嵌套选择下拉菜单答案

【问题标题】：Javascript - Nest select dropdown inside textJavascript - 在文本内嵌套选择下拉菜单
【发布时间】：2016-12-12 02:32:03
【问题描述】：

我正在尝试拥有一个容器，例如：

<div class="container">
    <div class="row">
        <h2 style="text-align:center;">Option 1: {{ dropDown1}} Option 2: {{ dropDown2 }}</h2>
        //submit button
    </div>
</div>

我的单行文本中有两个“选择”下拉菜单。我可以让它以下列方式工作：

<div class="container">
    <div class="row">
        <h2 style="text-align:center;">Select your configuration options:</h2>
        <select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
        <select data-ng-options="o.name for o in options2" data-ng-model="selectedOption"></select>
    </div>
</div>

使用两个单独的下拉框（我使用的是 angular），但它们会显示在我的文本下方，无法达到我想要的结果。知道如何在文本之间嵌套这些下拉列表吗？

【问题讨论】：

标签： javascript jquery css angularjs

【解决方案1】：

您的第一个选择没有关闭。

要将它们放在同一行，请给它们 css: 'display: inline-block' 或 'float: left'。（使用 css 有更多方法可以做到这一点，如果你想使用 html，你应该真正学习 css）。

【讨论】：

【解决方案2】：

要让<select> 元素在<h2> 标头内流动，请使用<span> 元素来包含文本：

<h2 style="text-align:center;">
    <span>Option 1:</span>
    <select data-ng-options="o.name for o in options"
            data-ng-model="selectedOption">      
    </select>
    <span>Option 2: </span>
    <select data-ng-options="o.name for o in options"
            data-ng-model="selectedOption">      
    </select>
</h2>

【讨论】：