7、bootstrap-select下拉搜索框

bootstrap里好用的插件还真不少，bootstrap-select是一个新发现，项目中的普通下拉框数量已经达到了500多条，不加搜索功能太麻烦了。
1、github地址：
　　http://silviomoreto.github.io/bootstrap-select/
2、引入jquery，引入bootstrap-select 和 bootstrap 的 js和css文件

3、增加select下拉框

  
    
  
        

          数据列表：
        
        

            
              
        
    
  

4、在工具类中写了一个工具的方法来获取组装option

getAllDataIdList: function(basePath, dataId) {
    $.ajax({
        type : 'get',
        url : basePath + 'dataController/getAllDataIdList/',
        async : true,
        success : function(result) {
            var str = '请选择';
            for(var i = 0;i'+result[i].memo+'';
            }
            $('#dataIdSelect').html(str);
            if(dataId != '') {
                $('#dataIdSelect').selectpicker('val', dataId);
            }
            $('#dataIdSelect').selectpicker('refresh');
        }
    });
},

注意：
　　（1）组装好option之后需要手动刷新select，要不添加了也显示不出来。
　　　　$('#dataIdSelect').selectpicker('refresh');

image.png

如果要以编程方式更新select，首先操作select，然后使用refresh方法更新UI以匹配新的状态。 删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

（2）为select指定初始值的方法：
　　　　$('#dataIdSelect').selectpicker('val', dataId);