Question

我想使用bootstrap在我的文本输入字段中显示我的下拉菜单：

<script type="text/javascript">
    $(document).ready(function(e) {
        $('.selectpicker').selectpicker();
        $('div.cow').scrollyou();
        $("select").selectBoxIt();
    });
</script>

<form action="#" method="post" class="form-inline">
    <div class="input-append">
        <input type="text" class="form-control input-lg" name="domain" size="40" value="Search"/>
        <select name="tld[]" class="selectpicker scrollMe" data-size="5" data-live-search="true" multiple data-selected-text-format="values" multiple title='Select Option' data-style="btn-primary" data-width="15%">
            <div class="cow">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
                <option>Six</option>
            </optgroup>
            </div>
        </select>
        <button class="btn btn-lg btn-inverse" type="submit" value="Search" />
            <i class="fa fa-search"></i>
        </button>
    </form>
</div>

正如您所看到的，我正在使用Bootstrap-select和scrollYou来实现某些功能。

但是如何让我的选择字段（和选项）显示在搜索框内？

非常感谢任何帮助！

Answer 1

这是引导方式：

Input Groups with Dropdowns

右边有一个按钮：

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Action 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

正如已经指出的那样，你已经写了一些关于HTML的真正问题。使用bootstrap的片段，你应该好好去。

下载文本字段引导程序内的菜单

1 个答案: