时间戳

首页 > 解决方案 > bootstrap 4国家选择的问题

javascript - bootstrap 4国家选择的问题

问题描述

他们说 bootstrap 4 country select 不起作用，所以我尝试阅读文档如何使其工作，这就是我发现的。

使 bootstrap-select 与 bootstrap 4 一起工作，请参阅：

引导程序 4 beta-2

Bootstrap-select 仍然与 Bootstrap 4 beta-2 不兼容（1.12.4 版）。包含一个额外的 CSS 文件，或在您显示国家/地区选择器的页面上的标签之间添加以下内容：

下面，我尝试了代码，但它不起作用。

谁能帮我？

.bootstrap-select>.dropdown-menu>.dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  text-decoration: none;
}

.bootstrap-select>.dropdown-menu>.dropdown-menu li a:hover {
  background-color: #f4f4f4;
}

.bootstrap-select>.dropdown-toggle {
  width: 100%;
}

.dropdown-menu>li.active>a {
  color: #fff !important;
  background-color: #337ab7 !important;
}

.bootstrap-select .check-mark {
  line-height: 14px;
}

.bootstrap-select .check-mark::after {
  font-family: "FontAwesome";
  content: "\f00c";
}

.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Make filled out selects be the same size as empty selects */

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<script src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
<script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>


<div>
  <div>
    <select class="selectpicker countrypicker" data-live-search="true" data-default="United States" data-flag="true"></select>
  </div>
</div>

标签： javascripthtmljquerycssbootstrap-4

解决方案

您的代码中缺少bootstrap min js版本，根据bootstrap 4文档，这也需要popper js 。请检查下面的工作代码。

在新 JS 下面添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


an anyone help me?

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Country Select</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet"
        href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

    <style>
        /*
Make bootstrap-select work with bootstrap 4 see:
https://github.com/silviomoreto/bootstrap-select/issues/1135
*/
        .dropdown-toggle.btn-default {
            color: #292b2c;
            background-color: #fff;
            border-color: #ccc;
        }

        .bootstrap-select.show>.dropdown-menu>.dropdown-menu {
            display: block;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li.hidden {
            display: none;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li a {
            display: block;
            width: 100%;
            padding: 3px 1.5rem;
            clear: both;
            font-weight: 400;
            color: #292b2c;
            text-align: inherit;
            white-space: nowrap;
            background: 0 0;
            border: 0;
            text-decoration: none;
        }

        .bootstrap-select>.dropdown-menu>.dropdown-menu li a:hover {
            background-color: #f4f4f4;
        }

        .bootstrap-select>.dropdown-toggle {
            width: 100%;
        }

        .dropdown-menu>li.active>a {
            color: #fff !important;
            background-color: #337ab7 !important;
        }

        .bootstrap-select .check-mark {
            line-height: 14px;
        }

        .bootstrap-select .check-mark::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

        .bootstrap-select button {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Make filled out selects be the same size as empty selects */
        .bootstrap-select.btn-group .dropdown-toggle .filter-option {
            display: inline !important;
        }
    </style>
</head>

<body>



    <select class="selectpicker" data-live-search="true" data-default="United States"
        data-flag="true">
      <option value="select">Select</option>
      <option value="India">India</option>
      <option value="USA">USA</option>
      <option value="Australia">Australia</option>
      <option value="South Africa">South Africa</option>
    </select>



    </div>

    </div>

    <!--Scripts-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script
        src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
    <script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>

</body>

</html>

推荐阅读