Detailed explanation of how to use bootstrap drop-down search plug-in-JS Tutorial-php.cn

bootstrap-select is a drop-down search plug-in for boot. When using it, sometimes we need to dynamically load dynamic data from the background or directly. The following is a dynamic loading of the second-level linkage method based on the first-level drop-down menu. (Not ajax background acquisition) This article mainly introduces in detail how to use the bootstrap select drop-down search plug-in, and dynamically loads the secondary linkage of your own data. It has certain reference value. Interested friends can refer to it.

First introduce js and css files (one css and two js)

Copy after login

js omitted

1. Drop-down search (html)

Copy after login

2. Loading data secondary linkage (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('p.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' + '' + ''+cityIndex[i]+'' + '' + '' + ''; // 此处为了兼容ie，采用的字符串拼接而不是ES6的模板字符串。 // 添加option erjiOption += ''; } $('#d2').prev('p.dropdown-menu').find('ul').html(html); $('#d2').html(erjiOption); $('.selectpicker').selectpicker('refresh'); smallScreen(); }); }); });

Copy after login

Related recommendations:

Use Css+jQuery to create a drop-down menu

Example tutorial of Bootstrap drop-down menu

Example tutorial of Bootstrap button drop-down menu

The above is the detailed content of Detailed explanation of how to use bootstrap drop-down search plug-in. For more information, please follow other related articles on the PHP Chinese website!