记录bootstrap-select的常规使用

2021-04-13  本文已影响0人  不负好时光_9c46

bootstrap-select: 

官网:https://www.bootstrapselect.cn/

引入样式:

<link href="~/js/lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

引入js:

<script src="~/js/lib/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="~/js/lib/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

使用:

在select 中加class="selectpicker"

宽度设置: select 中加 data-width="100%"

加搜索: select 中加 data-live-search="true"

例:

<select class="selectpicker " name="qId" id="qId" placeholder="请选择单位所在区" data-width="100%" data-live-search="true">

      <option value="">请选择单位所在区</option>

</select>

动态加载option项:$(".selectpicker").selectpicker('refresh');

例:

              var option = '<option value="">请选择单位所在区</option>'

                $.each(resData.data, function (index, item) {

                    option += '<option value="' + item.id + '">' + item.name + '</option>';

                })

                $("#qId").html('');

                $("#qId").html(option);

                if (isEdit) {

                    $("#qId").val(itemData.qId);

                }

                $(".selectpicker").selectpicker('refresh');

上一篇下一篇

猜你喜欢

热点阅读