引导选择实施无法按预期进行

时间：2018-09-08 18:49:22

标签： javascript jquery html css bootstrap-selectpicker

我正在尝试引导选择的示例，虽然可以正常工作，但至少在我的实现中存在错误。

当我选择一个选项时，它就起作用了。（编辑：“全选”实际上不起作用，因为它没有将选择项放在框中。我怀疑这与我放置在所有位置的选项分隔符有关。选项，因为当我移除分隔线时，“全选”正常工作）但是，当我在元素外部单击，然后在元素上单击返回（也许用户想要更改他们做出的选择）时，它将不允许您可以调整当前所做的选择。唯一可以做的就是刷新页面并重新开始。

这是正在运行的实时演示的链接：

Example page im working on

这是我为此项目所做的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>

编辑2：希望下面的代码段正常工作 

< 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：

现在，我删除了以下代码，验证了eryerything可以正常工作：

<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.包括data-divider-true

时，是什么导致“全选”不起作用的原因
  1. 我可以做些什么来纠正此问题，以便可以使用分频器？

当前工作片段-无需使用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>

0 个答案:

没有答案
相关问题
最新问题