问题

Question

我正在尝试向Bootstrap-select选择器添加弹出窗口，但结果很糟糕。我怎样才能可靠地做到这一点？

感谢。

代码

我有JSBin代码。以下是相关的摘录：

HTML

<body>
  <input class="" type="text" id="text" />
  <select id="select">
    <option>option1</option>
    <option>option1</option>
  </select> 
</body>

的JavaScript

$("#select").selectpicker({selectOnTab: true, title: "My Title"});

$("button[data-id='select']")
//$(".bootstrap-select")
  .popover({title: "test", content: "test2", trigger: "focus", container: "body"});

问题

如果我使用button[data-id='select']作为选择器，那么它有效，但

当下拉菜单项具有焦点时，弹出窗口消失，因为下拉菜单不包含在按钮中。
弹出窗口的title设置会被选择选择器的title设置覆盖。（看起来他们在<button> DOM节点上使用相同的字段。）

另一方面，如果我使用.bootstrap-select作为选择器，它可以完美地工作，但只有当存在一个选择选择器时才会运行。

Answer 1

您可以将select包装在div中并改为引用div。

HTML

    <body>
    <input class="" type="text" id="text" />
    <div id="pop" style="display:inline-block">  
     <select id="select">
         <option>option1</option>
         <option>option1</option>
      </select> 
    </div>
    </body>

的Javascript

$("#select").selectpicker({selectOnTab: true, title: "My Title"});   
$("#pop").popover({title: "test", content: "test2", trigger: "focus"});

请务必在div上使用style="display:inline-block"，否则div将填充屏幕而不是选择的宽度。
通过使用包装器div，您将不会遇到标题问题。

链接到jsbin：http://jsbin.com/letecaxafu/edit?html,js,output

将Bootstrap popover添加到bootstrap-select选择器

代码

HTML

的JavaScript

问题

1 个答案:

HTML

的Javascript