Question

我正在尝试在我使用 HTML 创建的文本框中放置下拉菜单，但我不知道如何为此编码。

我找到了一种方法可以将图像放在文本区域内，但没有任何内容可用于下拉菜单。

$('input:text').css('background','#fff url(images/back.png) center right no-repeat');

我的想法是在搜索框中放置一个下拉菜单，以便用户可以选择要搜索的类别。例如：音乐，视频，图片。但选择下拉菜单应该在搜索框内。

我的下拉菜单代码是

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>                </ul>
      </li>

对我正在尝试做什么的任何建议？

Answer 1

您可以尝试使用z-index和绝对定位覆盖下拉列表。通过css为下拉列表指定绝对定位和z-index。

Answer 2

扩展@ TGH的答案：

CSS：

#dropdown
{
    position: absolute;
    z-index: 9999;
    top: 50px;
    left: 50px;
    border: 1px solid red;
}
body textarea
{
    width: 500px;
    height: 200px;
    border: 1px solid red;
}

HTML：

<select id="dropdown">
    <option value="1">1</option>
</select>
<textarea></textarea>

JS Fiddle

将下拉菜单放在文本框或文本区域内

2 个答案: