Реализация bootstrap-select не работает должным образом

Я пробую пример bootstrap-select, и он вроде работает, но, по крайней мере, в моей реализации есть ошибка.

Когда я выбираю вариант, он работает. (EDITED: «Выбрать все» на самом деле не работает, поскольку он не помещает выбор в поле. Я подозреваю, что это как-то связано с разделителем параметров, который я поместил перед всеми параметрами, потому что, когда я удаляю разделитель, «Выбрать все» работает правильно) Однако, когда я щелкаю за пределами элемента, а затем снова щелкаю по элементу (возможно, пользователь хочет изменить сделанный им выбор), это не позволит вам настроить любые текущие выборы, которые вы сделали. Единственное, что вы можете сделать, чтобы сделать выбор, - это обновить страницу и начать заново.

Вот ссылка на живую демонстрацию, над которой я работаю:

Пример страницы, над которой я работаю

Вот звонки CDN, которые я делаю для этого проекта:

<!-- Bootstrap core CSS -->

<script
  src = "https://code.jquery.com/jquery-3.3.1.js"
  integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
  crossorigin = "anonymous"></script>

<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity = "sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin = "anonymous"></script>


<!--  BOOTSTRAP SELECT -->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>



    <link href = "dist/css/bootstrap.min.css" rel = "stylesheet">

Вот пример кода на этой странице:

<select class = "selectpicker" multiple data-actions-box = "true">
<option data-divider = "true"></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Обновлено еще раз: Надеюсь, рабочий фрагмент кода ниже -

< script >
  $(function() {
    $('[data-toggle = "tooltip"]').tooltip()
  }) <
  /script>

  <
  script type = "text/javascript" >
  $(window).on('load', function() {

    $('.selectpicker').selectpicker({
      'selectedText': 'cat'
    });

    // $('.selectpicker').selectpicker('hide');  
  }); <
/script>
.text-muted {
  font-size: small;
}

.text-bold {
  font-weight: bold;
  font-size: small;
}

.button {
  background-color: #008CBA;
  /* Light Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  padding: 6px 10px;
}

.button2:hover {
  background-color: #008CBA;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 30px 0 rgba(0, 0, 0, 0.19);
  padding: 6px 10px;
}


/* Blue */

.button3 {
  background-color: #f44336;
}


/* Red */

.button4 {
  background-color: #e7e7e7;
  color: black;
}


/* Gray */

.button5 {
  background-color: #555555;
}


/* Black */

.button6 {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

.button6:hover {
  background-color: #037BA2;
  color: white;
}

td {
  text-align: left;
  valign = "middle";
}

i {
  border: solid white;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.dropbtn {
  background-color: #008CBA;
  color: white;
  padding: 12px;
  font-size: 12px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #037BA2;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #037BA2;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  padding-top: 3px;
  right: 0;
}

.dropdown:hover .dropbtn {
  background-color: #037BA2;
}

input[id=Search],
select {
  padding: 8px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[value=Apply] {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

input[value=Reset] {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

input[value=Apply]:hover {
  background-color: #C44E22;
}

input[value=Reset]:hover {
  background-color: #C44E22;
}

table.table1,
th.th1,
td.td1 {
  width: 100%;
  color: white;
  font-size: 16px;
  padding-left: 10px;
  background-color: #008CBA;
}

.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.glyphicon.glyphicon-info-sign {
  font-size: 25px;
  top: 5px;
}
<head>


  <!-- Bootstrap core CSS -->
  <link href = "dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity = "sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin = "anonymous"></script>



  <!-- JQUERY -->
  <script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin = "anonymous"></script>

  <!--  BOOTSTRAP SELECT -->
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />




  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href = "assets/css/ie10-viewport-bug-workaround.css" rel = "stylesheet">

  <!-- Custom styles for this template -->
  <link href = "dashboard.css" rel = "stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src = "assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src = "assets/js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

  <h1> TEST FILE </h1><br><br>

  <select class = "selectpicker" multiple data-actions-box = "true">
    <option data-divider = "true"></option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
  <br><br><br><br>
  <h1>END</h1>
  <p>NO MORE PAST HERE
    <p><br><br>
</body>

РЕДАКТИРОВАТЬ 3:

Теперь я убедился, что все работает правильно, если я удалю следующий код:

<option data-divider = "true"></option>

из кода, который я использовал:

<select class = "selectpicker" multiple data-actions-box = "true">
<option data-divider = "true"></option>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

Итак, вопросы будут такими: 1. Что заставляет Select All не работать при включении data-divider-true

  1. Что я могу сделать, чтобы исправить это и использовать разделитель?

СЕЙЧАС РАБОТАЮЩИЙ SNIPPET - без использования data-divider-true

< script >
  $(function() {
    $('[data-toggle = "tooltip"]').tooltip()
  }) <
  /script>

  <
  script type = "text/javascript" >
  $(window).on('load', function() {

    $('.selectpicker').selectpicker({
      'selectedText': 'cat'
    });

    // $('.selectpicker').selectpicker('hide');  
  }); <
/script>
.text-muted {
  font-size: small;
}

.text-bold {
  font-weight: bold;
  font-size: small;
}

.button {
  background-color: #008CBA;
  /* Light Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  padding: 6px 10px;
}

.button2:hover {
  background-color: #008CBA;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 30px 0 rgba(0, 0, 0, 0.19);
  padding: 6px 10px;
}


/* Blue */

.button3 {
  background-color: #f44336;
}


/* Red */

.button4 {
  background-color: #e7e7e7;
  color: black;
}


/* Gray */

.button5 {
  background-color: #555555;
}


/* Black */

.button6 {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

.button6:hover {
  background-color: #037BA2;
  color: white;
}

td {
  text-align: left;
  valign = "middle";
}

i {
  border: solid white;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.dropbtn {
  background-color: #008CBA;
  color: white;
  padding: 12px;
  font-size: 12px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #037BA2;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #037BA2;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  padding-top: 3px;
  right: 0;
}

.dropdown:hover .dropbtn {
  background-color: #037BA2;
}

input[id=Search],
select {
  padding: 8px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[value=Apply] {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

input[value=Reset] {
  font-size: 12px;
  padding: 8px 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #D35324;
  color: white;
}

input[value=Apply]:hover {
  background-color: #C44E22;
}

input[value=Reset]:hover {
  background-color: #C44E22;
}

table.table1,
th.th1,
td.td1 {
  width: 100%;
  color: white;
  font-size: 16px;
  padding-left: 10px;
  background-color: #008CBA;
}

.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.glyphicon.glyphicon-info-sign {
  font-size: 25px;
  top: 5px;
}
<head>


  <!-- Bootstrap core CSS -->
  <link href = "dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity = "sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin = "anonymous"></script>



  <!-- JQUERY -->
  <script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin = "anonymous"></script>

  <!--  BOOTSTRAP SELECT -->
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />




  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href = "assets/css/ie10-viewport-bug-workaround.css" rel = "stylesheet">

  <!-- Custom styles for this template -->
  <link href = "dashboard.css" rel = "stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src = "assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src = "assets/js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
  <h3>START OF TEST</h3>
  <br><br>
  <p><div>
  <select class = "selectpicker" multiple data-actions-box = "true">

    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div></p>

  <p><br><br><br></p>
  <h3>END OF TEST</h3>
  <p><br><br></p>



</body>

Какой браузер вы используете. Я использую chrome 69 и не могу воспроизвести проблему, которую вы описываете. Также, если вы не изменяли и не добавляли какие-либо CSS или JS, влияющие на выбор, вам может потребоваться создать проблему в их репозитории на github.

— SuperDJ 08.09.2018 21:48

Спасибо за ответ, я на версии 68. Я собираюсь перейти на 69 и посмотреть, поможет ли это. Ответим здесь с результатом.

— Joseph Sanders 08.09.2018 21:50

Обновился до 69 на хроме, перезагрузился, у меня проблема все еще существует. Пробовал в Safari, и у меня такая же проблема.

— Joseph Sanders 08.09.2018 21:54

В этом случае вы можете создать рабочий фрагмент кода. Первый 1 ничего не делает. Второй работает, поэтому нет возможности увидеть, что идет не так, кроме предоставленной ссылки

— SuperDJ 08.09.2018 21:56

Хотел бы я понять, как правильно выполнить фрагмент кода, потому что каждый раз, когда я пытаюсь, я не могу понять, как я должен отделить свой код. мля, я новичок в обмене стеками, поэтому приношу свои извинения.

— Joseph Sanders 08.09.2018 22:06

Хорошо, возможно, я наконец-то добился некоторого прогресса - по двум направлениям. Я смог (я думаю) понять часть фрагмента кода. Используя это, я обнаружил, что загружаю bootstrap-select и bootstrap в неправильном порядке. После исправления, похоже, теперь он работает правильно, за исключением «Выбрать все». Это все еще не работает правильно.

— Joseph Sanders 08.09.2018 23:16
javascript jquery html css bootstrap-selectpicker
08.09.2018 20:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
629
0

Другие вопросы по теме

Как установить дату в каталоне с датпикера
Остановите пользователей, вводящих данные AJAX, посетив URL-адрес конечной точки
A [href * = ""] не работает для страницы, полной ссылок
Отправленные данные о новом продукте Opencart 3
Добавить активный класс в div на основе URL
JavaScript / jQuery -> Как добавить разделитель тысяч в "Итоговое значение?"
Как преобразовать JSON в массив в JavaScript?
Итерации JSON дают символы, а не элементы
Select2 изменить цвет во время выполнения с помощью Ajax
Как настроить и использовать всплывающие подсказки?

Похожие вопросы

Вопрос JavaScript с использованием циклов и функций
Преобразование строки в число не дает ожидаемого результата в javascript
Прокрутите назад до верхней части поля при наведении курсора мыши
Разделите строку в свойстве объекта и создайте новый набор данных
Почему высота моей липкой навигационной панели исчезает при прокрутке?
Цикл через JSON - особый способ
Как перебирать массив объектов, чтобы добавить значение счетчика, если в объектах обнаружены повторяющиеся имена
THREE.js - CameraContros и вектор camera.up
Как установить дату в каталоне с датпикера
Как правильно разделить компоненты приложения React