twitter-bootstrap 引导选择不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30247912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:40:24  来源:igfitidea点击:

Bootstrap select not working

htmlcsstwitter-bootstrap

提问by Bowen Su

I have something like this:

我有这样的事情:

<select class="selectpicker" name="level">
<option value="Field">Field admin</option>
<option value="Text">Text admin</option>
<option value="Bot">Bot</option>
</select>

With this at the bottom:

底部有这个:

<script src='./clientLib/bootstrap-select.js'></script>

Adding this (at the bottom of the page after loading the above script) doesn't work:

添加此(在加载上述脚本后的页面底部)不起作用:

 $('.selectpicker').selectpicker();

Right now, the button gets formatted but clicking the select does not load the drop down. Pressing alt loads the drop down but there is no way to close the dropdown, even if I select an option.

现在,按钮已格式化,但单击选择不会加载下拉列表。按 alt 加载下拉菜单,但无法关闭下拉菜单,即使我选择了一个选项。

Anyone have any ideas on why this is happening?

任何人都对为什么会发生这种情况有任何想法?

回答by Taylor swift

Try to load the script in the head section of the page and this '$('.selectpicker').selectpicker();' at the bottom of the page

尝试在页面的 head 部分加载脚本和这个 '$('.selectpicker').selectpicker();' 在页面底部

回答by Sarower Jahan

Your structure will be

你的结构将是

    <head>
    <!-- Stylesheet for Bootstrap Core CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Stylesheet for Bootstrap Select-picker-->
    <link href="css/bootstrap-select.min.css" rel="stylesheet">
    </head>
    <body>
          <select class="selectpicker" name="level">
               <option value="Field">Field admin</option>
               <option value="Text">Text admin</option>
               <option value="Bot">Bot</option>
          </select>

         <!-- JS for Core jQuery v1.11.3-->
         <script src="js/jquery.min.js"></script>
         <!-- JS for Core Bootstrap-->
         <script src="js/bootstrap.js"></script>
         <!-- JS for Bootstrap Select-picker-->
         <script src="js/bootstrap-select.min.js"></script>
    </body>

You can use this script under all js:-

您可以在所有 js 下使用此脚本:-

 $('.selectpicker').selectpicker();

If you face any error, you can use:-

如果您遇到任何错误,您可以使用:-

 jQuery('.selectpicker').selectpicker();

回答by Jaztek

Try adding the bootstrap-select.js after the default bootstrap and jquery scripts in the footer- that worked for me.

尝试在页脚中的默认 bootstrap 和 jquery 脚本之后添加 bootstrap-select.js - 这对我有用。

回答by Ali Kianoor

Make sure u put this on the top of page u want to use bootstrap Select

确保你把它放在页面顶部你想使用引导选择

<link href="css/bootstrap-select.min.css" rel="stylesheet">
<script src="js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
    $('.selectpicker').selectpicker();
});
</script>

and Check the path of Files to be sure its correct. its should work.

并检查文件的路径以确保其正确。它应该工作。

<select class="selectpicker" name="level">
  <option value="Field">Field admin</option>
  <option value="Text">Text admin</option>
  <option value="Bot">Bot</option>
</select>

Best Regards Kianoor

最好的问候 Kianoor

回答by MintTeaCode

I had the same issue

我遇到过同样的问题

Fixed by calling bootstrap js

通过调用 bootstrap js 修复

Before the button Select js

按钮前选择js