Bootstrap-select不会切换"打开"类

时间:2015-03-17 19:27:57

标签: jquery twitter-bootstrap bootstrap-select

请查看 - > FIDDLE

我从http://silviomoreto.github.io/bootstrap-select/下载了源代码,我真的不知道为什么它不会切换“.dropdown-toggle”的“开放”类 我可以通过添加一些杂乱的脚本来修复它,但我更喜欢插件才能正常工作。

HTML:

<div class="number customdp">
<select class="simple-dropdown" name="number">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

有人有解决方案吗?

5 个答案:

答案 0 :(得分:12)

它依赖于twitter bootstrap。包括他们的CSS 和JavaScript 文件,如下所示:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

请参阅包含CSS和JS的this updated fiddle,它似乎工作正常。

答案 1 :(得分:9)

我有同样的问题。即使在引用正确后,下拉列表也没有显示。所以我包含了以下代码并且它有效。

public IEnumerable<SelectListItem> createProductsDropdownForTransReport()
{
    var resultsOfProductsSearch = findAllByEnumSet(
        EnumLookup.EnumSetType.SterlingWestProducts);

    var transanctionsReportProducts = resultsOfProductsSearch
        .Where(el => el.Ordinal != 95 && el.Ordinal != 253)
        .Select(el => new SelectListItem { Text = el.Text, Value = el.Text })
        .OrderBy(el => el.Text)
        .ToList();

    transanctionsReportProducts.Add(new SelectListItem { 
        Text = "SSN Trace", Value = "SSN Trace" }); 

    var allTransReportProductsOption = new SelectListItem
    {
        Text = "All",
        Value = String.Join(" | ", transanctionsReportProducts.Select(x => x.Text)) 
    };

    transanctionsReportProducts.Insert(0, allTransReportProductsOption);

    return transanctionsReportProducts.OrderBy(el => el.Text);
}

答案 2 :(得分:2)

正确的依赖顺序并没有解决我的问题。我尝试了DynoMyte's解决方案。代码打开一个下拉列表,但不要关闭它。所以我添加了几行来解决这个问题。

   $(".selectpicker").selectpicker();
      $(".bootstrap-select").click(function () {
        $(this).addClass("open");
      });
      $(document).click(function(){
        $(".bootstrap-select").removeClass("open");
      });
      $(".bootstrap-select").click(function(e){
        e.stopPropagation();
    });

答案 3 :(得分:0)

最佳解决方案是按照以下顺序将所有JS文件包含在body的底部:

  1. 的jQuery
  2. 自举
  3. 自举选

答案 4 :(得分:0)

我遇到了这个问题,因为包含了bootstrap.js以及引导库中的dropdown.js。 bootstrap.js已经包含dropdown.js的所有部分。

在这种情况下,似乎所有事件处理程序都附加了两次,从而导致单击两次切换下拉菜单-这导致打开后立即将其关闭。