zoukankan      html  css  js  c++  java
  • select 美化(bootstrap)

    需要引入的文件:

            bootstrap-combined.min.css

            bootstrap-select.css

            bootstrap-select.js

    以及bootstrap.min.js等几个常用的bootstarp文件

    实现:

    1、    在<select>标签中添加class或者id,建议添加class,因为class可以重复;

    2、    在js文件中添加初始化方法:

    1    initFnc : function(){
    2                 $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
    3          }
    4  

     在外部初始化的时候调用该方法就ok!

    下图是美化后的:不是很好看,但是自己觉得比之前强多了!

    但是这种美化插件有几个问题:

        其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<select>将取法显示,我觉得应该是这样:        bootstrap-select.js中把没有option的<select>显示'请输入',这样的话动态赋值的option就写不进去了!如果能把noneSelectedText:'请选择'   进行修复,那么这个问题应该是可以解决的!

    --------------------------------------------------------------------------------------------------------------------------------------------------------------

            经过几个小时的研究,发现了问题所在,但是只是解决了其中的一个;

            在js中调用的时候,一定要等也面上的select 中的option加载完成之后再调

    1  initFnc : function(){
    2     $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
    3  }

    这样就可以把动态的select赋值也能美化了,但是任然存在一个问题:不是页面上的每一个select都能在页面初始化的时候全部加载的,比如:现在有两个联动的select,也就是第二个select的option要随第一个变化,在js中添加监控onchange或者change;如果这样美化就有问题了!

  • 相关阅读:
    Linux内核RPC请求过程
    二分图
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 文本加密
    Java实现 蓝桥杯 算法提高 文本加密
    Java蓝桥杯 算法提高 九宫格
    Java蓝桥杯 算法提高 九宫格
  • 原文地址:https://www.cnblogs.com/tianhyapply/p/3620898.html
Copyright © 2011-2022 走看看