时间戳

首页 > 解决方案 > 无法在弹出框中包含选择字段

javascript - 无法在弹出框中包含选择字段

问题描述

我正在下降以在弹出框内包含一个选择菜单，但每次我尝试弹出框内容块都是空白的。弹出框附加到侧面菜单项。这是我用来构建部分侧边菜单并希望弹出框位于“日期历史”上的代码： 

<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();
    }
});

标签： javascripthtmlbootstrap-4

解决方案

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

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

推荐阅读