标签: bootstrap-select

我正在使用Bootstrap-select http://silviomoreto.github.io/bootstrap-select/来获取其中一些增强选项.

当我开发select的功能时,我正在使用直接的html选择响应jQuery事件,以在选择选项时进行Ajax调用.我在每个选项上使用数据属性来定义传递给Ajax调用的参数.

不幸的是,在应用Bootstrap-select组件时,它会将底层选择转换为带有隐藏ul的按钮.我的数据属性无法在转换中存活.是否有任何方法可以将自定义数据应用于可以在转换中存活的选项？

这是我的ASP.NET MVC代码生成选择:

<select class="selectpicker show-tick btn-kpi btn-kpi-select" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{ 
    <option class="select-chart-column" 
            data-action="@col.Action" 
            data-new-id="@col.ID" 
            data-chart-index="@Model.ChartIndex" >
            @col.DisplayDescription()
    </option>
}
</select>

我的jQuery代码响应点击是这样的:

$('#charts').on('click', '.select-chart-column',
    function () {
        $this = $(this);
        $.shared.mvcAjax("/SelectChartColumn",
        {
            action: $this.data("action"),
            newId: $this.data("new-id"),
            chartIndex: $this.data("chart-index")
        },
        updateChartData);
    }
);

生成的html的示例如下:

<div class="btn-group bootstrap-select show-tick btn-kpi btn-kpi-select open">
    <button type="button" class="btn dropdown-toggle btn-kpi-selector" data-toggle="dropdown">
        <div class="filter-option pull-left">
            Rate            </div>&nbsp;<div class="caret"></div>
     </button>
     <ul class="dropdown-menu" role="menu" style="max-height: 699px; overflow-y: auto; min-height: 99px;"> …

使用Bootstrap 3和Bootstrap-Select插件我试图从数据库加载ajax选择下拉列表的选项.当我select picker从select元素中移除lass 但是使用该类(需要使用bootstrap select)时,代码工作正常它没有加载任何选项.

 <select id="arearesults" class="selectpicker" data-live-search="true">
    <option value="select">Select From The List</option>
 </select>

$('.btn-group .btn').click(function(){
    $.post(
    'con/animalList.php',
    { selType : this.id },
    function(data)
                {
                  $('#arearesults').html(data);
                }
    );
});

我已经测试了bootstrap select插件,它也在独立模式下工作(硬编码).能不能让我知道为什么会这样,以及如何解决这个问题？

谢谢

我有选择器的问题,我定义为:

 <select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple> 

但是,当我选择数据时,它不会显示选项旁边的刻度.我正在使用bootstrap 2.3.2与bootstrap-select.我将css和js添加到我的断言中.我可以选择并获取值,但是当我选择它时,我无法看到选项旁边的刻度.

干杯,

我遇到了各种各样的问题。

1）我正在使用Bootstrap-Select来获得具有搜索功能的现代选择框，但是无论我如何尝试，我似乎都无法获得用于填满col-span的选择框。

2）我将行分为2列：2（选择）和10（图像/贴图），但是除非我将宽度从100％更改为更小，否则它们是重叠的，并且会彼此重叠放置左右。

3）每个图像（将由地图替换）均设置为50％的高度和100％的宽度，但仍然可以看到浏览器的滚动条，而且滚动条的空间也不小。我想在没有滚动条的情况下将地图显示为完整的50％高度（每个地图总计为100％）。我觉得导航栏的高度需要考虑在内？

为了方便起见，请使用随附的jsFiddle！添加边框仅出于列可见性，可以删除。

的HTML

<div class="container" style="border: 1px solid red;">
  <div class="row">
    <div class="col-md-2" style="border: 1px solid blue;">
      <div class="form-horizontal">
        <select class="selectpicker col-sm-12" data-live-search="true" title="Routes">
          <option>1 Route A - WEST</option>
          <option>2 Route B - SOUTH</option>
          <option>2 Route B - NORTH</option>
          <option>3 Very Long Route Name C - SOUTH</option>
          <option>3 Very Long Route Name C - NORTH</option>
          <option>4 Route D - EAST</option>
          <option>4 Route D - WEST</option>
          <option>5 An Extremely Long Route Name E - SOUTH</option>
          <option>5 An Extremely …

我正在尝试使用bootstrap-select并从javascript引用它,但我总是收到错误:.selectpicker is not a function

我读到的关于这个错误的所有内容都表明我有一个依赖项丢失或者没有在正确的时间加载,但我对于我所缺少的东西感到茫然.

此外,当我$('.selectpicker').selectpicker();从控制台尝试时,我得到了同样的错误,这告诉我在加载所有内容之前我的javascript运行不是问题.

这是我的页面的相关部分:

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-select.css" rel="stylesheet"/>
...
<script src="/Scripts/jquery-2.2.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

<script src="/Scripts/bootstrap-select.js"></script>
...
<select class="selectpicker">
</select>
...
<script type="text/javascript">
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    });
</script>

我一直在使用bootstrap selectpicker,我在其中添加了一个Add Button,供用户根据需要复制按钮.问题是,selectpicker不在第二个/克隆元素上工作,下拉列表的值只是显示而不是在点击时改变.

主要选择:

<div id="main_product">
  <select name="product[]" class="selectpicker" >
   <option value="Tube Lights" >Tube Lights</option>
   <option value="Downlights" >Downlights</option>
  </select>
</div>

克隆功能:

function clone()
{
    var $orginal = $('#main_product');
    var $cloned = $orginal.clone();

    $cloned.appendTo('#new_products');
    // $cloned.find('.bootstrap-select').remove();
    // $cloned.find('select').selectpicker();
}

请注意,我尝试将selectpicker重新分配给注释atm中的克隆对象,因为它也可以工作.

任何帮助将非常感激.

我习惯bootstrap-select.min.js在下拉列表中搜索.但它给出了错误的结果.我的HTML代码如下所示:

<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
    <option value="4444">4444</option>
    <option value="Fedex">Fedex</option>
    <option value="Elite">Elite</option>
    <option value="Interp">Interp</option>
    <option value="Test">Test</option>
</select>

当我写的te不是它显示Elite, Interp and test代替test.

如果我写的te比它只显示test.那我应该在代码中改变什么呢？

我正在使用Bootstrap v4和bootstrap-select js/css(在ASP.NET MVC项目中),我的问题在于我的问题form.在select与multiple选项从bootstrap-select比我的更广泛的休息inputs,即使它是在div用class="form-control".输出看起来像这样:

正如您所看到的,专业领域dropdown比其他领域更大inputs.我试图编辑bootstrap-select.css和更改width:auto,但没有奏效.我能做些什么来匹配width我的另一个inputs吗？

我的代码看起来像这样

<div class="form-group">
    @Html.LabelFor(v => v.BirthDate)
    @Html.TextBoxFor(v => v.BirthDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
    @Html.ValidationMessageFor(v => v.BirthDate)
</div>
<div class="form-group">
    @Html.LabelFor(v => v.ResidenceCountry)
    @Html.TextBoxFor(v => v.ResidenceCountry, new { @class = "form-control" })
    @Html.ValidationMessageFor(v => v.ResidenceCountry)
</div>
<div class="form-group">
    @Html.LabelFor(m => m.CurrencyId)
    @Html.DropDownListFor(m => m.CurrencyId, …

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap-select.min.css">
</head>
<body>
    <select class="selectpicker">
        <option>Choose</option>
        <option>1</option>
        <option>1</option>
    </select>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.selectpicker').selectpicker();
        });
    </script>
</body>
</html>

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

我做错事了吗？我尝试寻找答案，但似乎找不到任何有效的答案。谢谢。

注意：我尝试使用 Chrome 和 Firefox，两者都给出了相同的结果。

我按照他们的官方网页上的入门指南进行操作

我将 JS 和 CSS 库添加到我的项目中，但它不起作用。

由于某种原因selectpicker设置为display: none!important：

    .bootstrap-select>select.bs-select-hidden, select.bs-select-hidden, select.selectpicker {
        display: none!important;
    }

我收到此错误：

由这个JS引起的： <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

我尝试过的：

• 即使我将代码更改为display: blockbootstrap-select 它仍然无法工作。
• 按照另一个 SO 问题中的建议更改导入顺序

我已经检查了之前的 SO问题，并且更改了导入的顺序，但它仍然不起作用。

JS 小提琴演示