• bootstrap-select采坑


    bootstrap-select采坑
    1.class="selectpicker" 普通的下拉框功能
    2.title="请选择城市名称" title的作用与palcehoder一样。
    3.select class="selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选
    4.data-live-search="true" 这个属性的默认值是false,作用是打开模糊筛查搜索框。
    5.data-max-options 这个属性表示最多可选几个,搭配multiple使用,
    用法:data-max-options=“2”,表示最多选两个。
    6..data-selected-text-forma缩略模式, 用法:data-selected-text-format="count > 3",
    当选中值大于3个的时候只显示选中项的个数,注意只对多选生效。
    7.data-style 表示默认选中样式,
    用法:data-style="btn-primary",属性值就是bootstrap的按钮样式。
    8..data-size data-size="6",表示下拉框显示的下拉列表数量。
    9.data-dropup-auto=""

    10.data-dropup-auto="false", 表示下拉框默认向下展开;"true",表示下拉框默认向下展开;
    "auto",(默认值)表示下拉框根据页面尺寸自动向下或向上展开。
    11$('.selectpicker').selectpicker('selectAll'); 全选:
    $('.selectpicker').selectpicker('deselectAll'); 反选:
    $('.selectpicker').selectpicker('mobile'); 适应手机模式:
    12./给下拉框赋初始值   .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签
                                $('.selectpicker:eq(0)').selectpicker('val',valArea);
                                $('.selectpicker:eq(1)').selectpicker('val',valPost);
                                $('.selectpicker:eq(2)').selectpicker('val',valBank);
                                $('.selectpicker').selectpicker('refresh');
                                $('.selectpicker').selectpicker('render');
                            });

    13.与angular或者knockout合用问题:
    即下拉框无法显示出选项,但实际上,按下F12去查看时,又明显的有这些选项值,只是页面无法展示。
    a. 添加Js:(只有在编译之后第一次进入页面的时候生效,一旦刷新之后就失效(因为angular异步加载)
    $(function () {
    $('.selectpicker').selectpicker('refresh');
    $('.selectpicker').selectpicker('render');
    })

  • 相关阅读:
    javascript进阶,从表达式到引用类型,变量监听
    nodejs和es6,es5等关系
    前后端分离工程带来的问题
    vue难点解析
    angular框架及其UI使用
    Javascript入门和TypeScrip入门
    从熟悉项目到开发项目
    昌平某公司入职一周感想
    css和前端UI框架设计ElementUI
    2020新征程
  • 原文地址:https://www.cnblogs.com/benbenjia/p/9956674.html
Copyright © 2020-2023  润新知