文章目录

1.bootstrap-select下载地址2.pooper.js下载地址3.django引入js的路径4.下拉选项内容过长设置自动换行5.手动指定默认选中的项6. 改变下拉框的高度

1.bootstrap-select下载地址

链接：https://pan.baidu.com/s/1u6dVSzSFS6G2xbt9A4No5Q 提取码：1qbl

2.pooper.js下载地址

链接：https://pan.baidu.com/s/1XJTZb7L1pa-W-VnQEe6RGA 提取码：6i0x

3.django引入js的路径

存放位置

html页面引入 popper.js必须在bootstrap-select.js之前引入

<script type="text/javascript" src="{% static 'bootstrap-select-1.13.9-dist/js/bootstrap-select.min.js' %}" charset="utf-8" </script> {# 同样引入popper.js ; #}

定义下拉选择框的代码

<select id="product_brand" name="product_brand" class="form-control selectpicker" title="--请选择--" data-live-search="true" onchange="select_brand_option(this)"> </select>

title - - 类似placeholder，默认框内提示

data-live-search - - true标识下拉选则列表带有选择框 ​ 动态匹配的内容是已经加载的选择项，不会与后台交互。

onchange - - 当选择框内选中项的值发生变化时，调用的方法，参数是选中项的对象

js相关

//1.获取选中项的值 $("#product_brand").val(); /** 2.页面加载时，加载下拉列表 后台返回的值是 [{"product_brand": value01}, {"product_brand": value02}, ... {"product_brand": value0n} ..]的数组 如下假如返回的数组名为brand_list */ var brand_html = ""; $.each(brand_list, function (i) { brand_html += '<option class="option_item_brand">'+brand_list[i].product_brand +'</option>'; }); //3.添加下拉选值 $("#product_brand").append(brand_html); //4.下拉选刷新 $("#product_brand").selectpicker('refresh'); //5.下拉选默认初始化加载不选择内容 $("#product_brand").selectpicker('deselectAll'); //6.清除选择框中的选择项的显示的value值 $("#product_brand").selectpicker('val',['noneSelectedText']); //局部刷新时，每次需要先删除上次的选择项，然后加载 //7.jquery判断元素是否存在 元素.length if ( $("option.option_item_brand").length > 0 ) { $("option.option_item_brand").remove(); }

4.下拉选项内容过长设置自动换行

<style type="text/css"> .bootstrap-select .dropdown-menu { max-width: 350px; min-width: 100px; border: 1px solid cornflowerblue; border-radius: 2px; box-shadow: 0 2px 8px #888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bootstrap-select .dropdown-menu li a span.text { display: inline-block; white-space: pre-wrap; word-wrap: break-word; max-width: 100%; } </style>

5.手动指定默认选中的项

$("#product_brand").selectpicker("val", brand_name_get); $("#product_brand").selectpicker('refresh');

6. 改变下拉框的高度

下拉框的高度无法使用js代码进行修改，网上搜索的是通过修改源码高度。 打开引入的 bootstrap-select.min.js 源码 然后使用搜索功能，搜索内容：

this.$menuInner.css({"max-height"

完整的内容格式如下：

this.$menuInner.css({"max-height":t>200?200:t+"px","overflow-y":"auto","min-height":l+"px"})

上面的内容意思是如果 t的值大于200px，则设置t的值为200px,不超过200px则t的值为它本身。是一个三目运算符。 这里就是设置最大高度的地方。通过修改源码的方式。

修改源码意味着必须把源码下载使用，不能使用 cdn在线引入 的方式，请注意。