美文网首页
记录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