简单的引导选择不起作用

时间:2018-07-03 01:04:10

标签: javascript jquery html css bootstrap-select

[1,2,3]

我有这个代码。 我正在使用jQuery 3.3.1 我使用了https://github.com/silviomoreto/bootstrap-select中的bootstrap-select并将其复制到本地,以节省一些加载时间。 但是当我尝试运行此命令时,我得到了以下结果:

Bootstrap-select .selectpicker not working

我做错了吗? 我尝试搜索答案,但似乎找不到任何有效答案。谢谢。

NB:我尝试使用Chrome和Firefox,两者都给了我相同的结果。

3 个答案:

答案 0 :(得分:1)

看起来您需要包括Bootstrap的dropdown.js组件和Bootstrap的CSS。只有这样,您才能使用private void left_panel_MouseEnter(object sender, EventArgs e) { foreach (Panel p in left_panel.Controls.OfType<Panel>()) { if (this.ClientRectangle.Contains(p.PointToClient(Control.MousePosition))) { p.BackColor = ColorTranslator.FromHtml("#ff0000"); } else p.BackColor = Color.Transparent; } } 。信息位于http://silviomoreto.github.io/bootstrap-select/的最上方。

看看这个小提琴https://jsfiddle.net/sairam0903/x9bm7qs8/2/

答案 1 :(得分:0)

this link的依存关系部分有您的答案。

要使其正常工作,您需要:

  • jQuery v1.8.0 +
  • 引导程序的dropdown.js
  • 引导程序的CSS

如果您的项目中没有引导程序,则可以添加minified version并根据需要对其进行自定义并重新编译。

PS不要使用引导程序版本4,因为它可能无法正常工作。

希望有帮助!

答案 2 :(得分:0)

尝试这一希望对您有帮助:)

$(document).ready(function(e) {
  $('.selectpicker').selectpicker();
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">


<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>