美文网首页
记录bootstrap-select的常规使用

记录bootstrap-select的常规使用

作者: 不负好时光_9c46 | 来源:发表于2021-04-13 15:58 被阅读0次

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');

相关文章

网友评论

      本文标题:记录bootstrap-select的常规使用

      本文链接:https://www.haomeiwen.com/subject/tzlclltx.html