无法在弹出窗口中包含选择字段

时间:2019-03-18 18:45:38

标签: javascript html bootstrap-4

我要在弹出框内添加选择菜单,但是每次尝试弹出框内容块都是空白时。弹出窗口附加到侧面菜单项。 这是我用来构建侧菜单的一部分的代码,并希望该弹出窗口位于“日期历史”上:

<li class="treeview">
          <a href="#">
            <i class="fa fa-navicon"></i> <span>History Settings</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#">
              <i class="fa fa-circle-o"></i> <span>Version History</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-right pull-right"></i>
              </span>
            </a></li>
            <li><a id="dateHistoryPop" data-toggle="popover">
              <i class="fa fa-circle-o"></i> <span>Date History</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-right pull-right"></i>
              </span>
            </a>
                  <div class="head hide" style="display:none">Date History</div>
                  <div class="content hide">
                        <select class="form-control" id="sel1">
                           <option>1</option>
                           <option>2</option>
                           <option>3</option>
                           <option>4</option>
                        </select>
                     <button type="submit" class="btn btn-default btn-block">
                     Submit
                     </button>
                  </div>
               </div>
            </li>
          </ul>
        </li>

我还在页面底部添加了以下内容:

    $('[data-toggle="popover"]').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

2 个答案:

答案 0 :(得分:0)

您应该在content参数而不是字符串中传递元素:

$('[data-toggle="popover"]').popover({
  html: true,
  title: function () {
    return $(this).parent().find('.head').html();
  },
  content: function () {
    return $(this).parent().find('.content').children();
  }
});

答案 1 :(得分:0)

我找到了以下解决方案:https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

我在数字表格的位置插入了一个选择表格,效果很好。

<div class='_content' id='blah'>
  <select class="form-control">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
     <option>option 5</option>
   </select>
 </div>