标签: bootstrap-select

我使用bootstrap selectpicker(http://silviomoreto.github.io/bootstrap-select/)

我试图通过以下方式扩大选择框大小:

<select class="selectpicker input-lg">...</select>

如果我在select输入中添加"input-lg",selectpicker会覆盖它,并且不会调整选择框的大小.

如何克服这个问题？

例如,请参阅http://www.bootply.com/107358#.

我试图在我在MVC中开发的Web应用程序中使用Bootstrap-Select来设置下拉列表的样式，使其类似于Bootstrap下拉列表，而我的其他应用程序正在使用Bootstrap。我的布局页面上有一个汽车制造商下拉列表，它调用Html.Action来做一个控制器，并从数据库的表中构建制造商列表，并返回下面的部分视图：-单击以下值之一时的注意事项提交下拉列表，并且用户导航到下一个屏幕。

<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.css"/>
<script type="text/javascript">

    $(document).ready(function() {

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

        $('#carManufacturers').change(function () {
            $(this).closest('form').submit();
        });

    });
</script>

@using (Html.BeginForm("Index", "Cars", FormMethod.Post))
{
    @Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker" })
}

这主要是因为Dropdown似乎是在引导程序中设置样式-我不确定的一件事是如何将data-style="btn-inverse"属性添加到我的dropdown-尝试在@ class =“ selectpicker'之后添加逗号并定义它，但是不工作。

同样由于某种原因，Intellisense会在selectpicker下划线并指出“未知的CSS样式selectpicker”？

另外，在渲染下拉菜单时，如下所示-如何摆脱第二个添加的“选择汽车制造商文本”？

我正在使用表单中的bootstrap-select项目,并且当它获得选择时我想获得所选值的optgroup值,因此我可以根据该组值评估要执行的操作:

$('select.selectpicker').on('change', function(e){

        var picker_id=e.target.id;
        var selected_value = $('.selectpicker option:selected').val();
        var optgroup = ??

        switch ( optgroup){
            case "group_name":

            break

        }
});    

感谢帮助.

我的选择引导程序不显示我附加的选项：

这是索引：

<div class="form-group label-floating">
  <div class="row">
    <div class="col-lg-5 col-md-6 col-sm-3">
      <select id="recau_agente" class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">
      </select>
    </div>
  </div>
</div>

这是在选项中插入选项的jQuery：

var ruta = "https://maxtechglobal.com/vencimientos/arba/conceptos_recaudacion.php";
var $select = $('#recau_agente');
$.getJSON(ruta, function(json) {
  $select.html('');
  $.each(json.data, function(index, value) {
    $select.append('<option id="' + value.concepto + '">' + value.concepto + '</option>');
  });
});

我想设计我的网站表单、输入和选择。我使用Bootstrap作为输入，Bootstrap-select用于选择，iCheck用于复选框。问题是 iCheck 不能与 Bootstrap-select 一起正常工作。

这是 jsFiddle 测试：http : //jsfiddle.net/36Xpf/

现在，尝试勾选 iCheck 复选框，bootstrap-select 的选择不会被禁用。然后选中标准方块复选框，引导程序的选择将被禁用。

我禁用了属性以选择是否使用 jQuery 选中复选框.change()：

$('#checkbox1').change(function(){
  if (this.checked) {
    $('.selectpicker').attr('disabled', false);
  } else {
    $('.selectpicker').attr('disabled', true);
  }                   
});

我做错了什么？为什么禁用属性在引导选择上不起作用？
任何帮助表示赞赏！谢谢！

我想从下面的下拉列表中选择多个值.在这个例子中,我想选择'Abbey'和'Belgrave'

<select id="dropdown" multiple>
    <option value='Belgrave'>Belgrave</option>
    <option value='Abbey'>Abbey</option>
    <option value='Castle'>Castle</option>
</select> 

我可以手动实现这个,这样工作正常:

$('#dropdown').selectpicker('val', ['Abbey', 'Belgrave']);

问题是通过在字符串中传递数组它不起作用:

var wards = dsFilterOptions.Wards.split(",");
var strWard = "[";
for (i = 0; i < wards.length; i++) {
    strWard += "'" + wards[i] + "',";
}
strWard = strWard.slice(0, -1); //remove last comma
strWard += "]";
$('#dropdown').selectpicker('val', strWard);

以上并没有选择Abbey&Belgrave的价值观.我能做什么.

我正在创建一个Web应用程序,我正在使用bootstrap selectpicker进行选择..但我正在使用angularjs来填充选择选择器..我有2个选择在第一个选择值的基础上填充一个的内容而不重新加载..我是能够在没有selectpicker的情况下完美地工作,而当使用selectpicker时它不起作用..我的代码是

<div class="form-group" data-ng-controller="MARK_ENTRY_CONTROLLER">
    <div class="row">
        <div class="col-md-6  " style="margin-top: 7px;">
            <label>Select Class</label>
        </div>
        <div class="col-md-6 text-center">
            <select class="form-control" title="Select Class" 
                name="fromClass" ng-change="EXAM_LIST_JSON(fromClass)"
                ng-model="fromClass"
                ng-options="fromClass.id as fromClass.course + ' ' + fromClass.section for fromClass in ALL_CLASS">
                </select>
        </div>
    </div>
    <div class="row" style="height: 10px"></div>
    <div class="row">
        <div class="col-md-6  " style="margin-top: 7px;">
            <label>Select Examination</label>
        </div>
        <div class="col-md-6 text-center" >
            <select class="form-control" name="examination"
                ng-change="SUBJECT_LIST_IN_EXAM_JSON()"
                ng-model="examination"
                ng-options="examination.id as examination.name for examination in EXAM_LIST"></select>
        </div>
    </div>

和控制器是

<script>
    function MARK_ENTRY_CONTROLLER($scope, $http) {
        $http.get("<%=request.getContextPath()%>/ALL_CLASS_JSON?AAdvisorId=${uid}").success(function(response) { …

这是我的静态HTML:

<select name="codici_transazioni" class="selectpicker" id="codici_transazioni">
    <option value="dsjkcbs">dsjkcbs - <i>Email, Facebook</i></option>
    <option value="scgwfsd" selected class="normaleSelect">scgwfsd - <i>Facebook</i></option>
    <option value="stdstyd">stdstyd - <i>Twitter</i></option>
</select>

这是从模态上下文中获取的一段代码.我希望我的select能够填充在.php文件上执行的Ajax结果,该文件返回MySQL数据库的结果.

现在,所有的Ajax和DB部分都在工作,当我尝试<select>在Ajax成功后通过jQuery 填充它时,结果与上面的默认值相同!

这是我的jQuery:

$('#codici_transazioni').html("");
for (var i = received.length - 1; i >= 0; i--) {
    <other DOM loading>
     $('#codici_transazioni').append("<option value=" + temp_code_transaction + "> " + temp_code_transaction + "- <i>" + temp_type_transaction+ "</i></option>");
}

我注意到Chrome(因此在加载页面后)在select之后创建了一些div.

我知道这是由Bootstrap完成的,但是如何在Ajax执行后重新加载此代码的创建以使选择下拉动态？

 <select   class="form-control selectpicker" id="specialty_id" data-live-search="true"  tabindex="-98" name="specialty_id" >

                                <option selected="" value="0" id="ee" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == 0): ?>{{ 'selected="selected"' }} <?php endif; ?>>Choose a Sp</option>
                                  @foreach($searchdropdown['dsp'] as $dsptext)
                                    <option value="{{ $dsptext->spect }}" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == $dsptext->spect): ?>{{ 'selected="selected"' }} <?php endif; ?>>{{ $spdata->sp }}</option>

                                  @endforeach

                              </select>

如何在占位框的输入文本中添加占位符。该文本框是动态生成的。我对此进行了研究，但找不到任何有用的内容。请帮我。

例如：请参考此链接 https://silviomoreto.github.io/bootstrap-select/examples/#live-search

我尝试了多种组合，但无法清除此控件。我正在使用 jquery 3.2.1，控件是 Bootstrap-select v1.13.1 这里是链接 https://developer.snapappointments.com/bootstrap-select/。

我想清除 teamPositionFilter 选项，每当 groupFilter 更改之前，该选项都是多选的。现在它在每次更改后附加值。我可以单步执行 javascript 代码，但它不会更改列表。

@Html.DropDownList("groupFilter", (SelectList)(@ViewBag.GroupList), new { @class = "singleselectpicker col-md-3", title = "Group:", data_header = "Select Group:" })
@Html.DropDownList("teamPositionFilter", (MultiSelectList)(@ViewBag.TeamPositionList), new { @class = "multiselectpicker col-md-3", multiple = "multiple", title = "Team Position:", data_header = "Select one or more Team Positions:" })

$(function() {

$('#groupFilter').change(function () {
    var #teamPositionFilter = $('#teamPositionFilter');
    #teamPositionFilter.find('option').remove();
    #teamPositionFilter.selectpicker('refresh');
});


$('.singleselectpicker').selectpicker({
    showTick: true,
    tickIcon: 'glyphicon-pushpin',
    liveSearch: true,
    liveSearchStyle: 'contains',
    selectOnTab: true,
    showContent: true, …