bootstrap select下拉搜索插件使用方法详解

bootstrap select下拉搜索插件使用方法详解

bootstrap-select是boot的下拉搜索插件，使用的时候有时我们需要动态从后台 或者 直接加载动态数据。

下面是根据一级下拉菜单，动态加载二级联动方式。（不是ajax后台获取）

首先引入js与css文件（一个css两个js）

js省略

一、下拉搜索（html）

请选择

0

1

2

3

请选择

二、加载数据 二级联动（js）

function smallScreen(){ // 个人项目中间距处理，可以省略

if($(window).width()<768){

$('.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn)').css({

'width':'100%',

'margin-top':'10px'

});

}

}

$(function(){

var erji=[

['海淀区','东城区','西城区'], // 0

['浦东区','金山区','黄埔区'], // 1

['台州市','杭州市','宁波市','嘉兴市'], // 2

['郑州市','洛阳市','开封市'] // 3

];

var yuan = '

'' +

'请选择' +

'' +

'' +

'

$('#d1').change(function(){ // 一级下拉菜单选项改变事件

if($(this).val() === '-1'){

$('#d2').prev('div.dropdown-menu').find('ul').html(yuan);

$('#d2').html('请选择');

$('.selectpicker').selectpicker('refresh');

smallScreen();

return;

}

var cityIndex = erji[ this.value ]; // 当前下标在二级对应内容

var html = '

'' +

'请选择' +

'' +

'' +

'

var erjiOption = '请选择'; // 同事添加option

for(var i = 0;i

html+= '

html+= '

'' +

''+cityIndex[i]+'' +

'' +

'' +

''; // 此处为了兼容ie，采用的字符串拼接而不是ES6的模板字符串。

// 添加option

erjiOption += ''+cityIndex[i]+'';

}

$('#d2').prev('div.dropdown-menu').find('ul').html(html);

$('#d2').html(erjiOption);

$('.selectpicker').selectpicker('refresh');

smallScreen();

});

});

});

个人使用有效。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。