使用bootstrap创建文本框的下拉列表

Question

所以我有多个名字元素（语言不同）

我想在桌子上制作它看起来像这样：

我是通过做这样的事情做到的：

<td>
    <div class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" style="text-align: center">
           Name<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
           <li style="text-align: center">
               Name
               {{ Form::text('name'.$forumCategory->id,$forumCategory->name,array('class' => 'change')) }}
           </li>
        </ul>
    </div>
</td>

它有文字输入的地方。但每次我点击该框时菜单都会消失。我怎么能绕过它或者以不同的方式做到这一点？

Answer 1

所以答案是：

<td>
    <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="collapse" data-target="#titleEdit" style="text-align: center">LV {{ Form::text('name'.$forumCategory->id,$forumCategory->name,array('class' => 'change')) }}
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu mt10" id="titleEdit">
           <li style="text-align: center">RU {{ Form::text('name'.$forumCategory->id,$forumCategory->name,array('class' => 'change')) }}</li>
           <li class="mt10" style="text-align: center">EN {{ Form::text('name'.$forumCategory->id,$forumCategory->name,array('class' => 'change')) }}</li>
        </ul>
    </div>
</td>

我正在使用刀片模板（laravel）来代替{{ Form::text('name'.$forumCategory->id,$forumCategory->name,array('class' => 'change')) }}，您将<input>标记与所需属性放在一起。

然后看起来像这样：

您可以输入，当选择文本框或按下插入符号时，菜单会打开。

编辑！-------------------------！

添加了一点修复，删除了标签的href，因为如果它们被留下，页面会在单击时跳转到顶部。