什么是 cascading-combobox？
cascading-combobox 是一个基于 jQuery 的级联下拉框插件，可以方便地实现多级联动选择的功能。它支持异步获取数据，可以应用于省市区三级联动、商品分类选择等场景。
安装与引入
安装 cascading-combobox：
npm install cascading-combobox --save
引入 cascading-combobox：
import 'cascading-combobox';
使用方法
HTML
<div class="cascading-combobox"> <select data-url="data/province.json"></select> <select data-url="data/city.json"></select> <select data-url="data/district.json"></select> </div>
JavaScript
$('.cascading-combobox').cascadingComboBox();API
初始化参数
urlKey（string）：每个下拉框的 URL 键名（默认为 "url"）defaultOption（string）：下拉框的默认选项（默认为 "请选择"）initialData（Array）：下拉框的初始数据initialValue（Array）：下拉框的初始值onLoad（function）：下拉框数据加载完毕时的回调函数（参数为当前下拉框的 jQuery 对象和数据）onChange（function）：下拉框选项改变时的回调函数（参数为当前下拉框的 jQuery 对象和选中的值）
方法
reset：重置所有下拉框为默认选项reload：重新加载选中下拉框的数据
示例
HTML
-- -------------------- ---- ------- ---- ------- --- ---- --------------------------- ------- --------------------------------------- ------- ----------------------------------- ------- --------------------------------------- ------ ---- ------ --- ---- --------------------------- ------- --------------------------------------- ------- ------------------------------------------ ------
JavaScript
// 省市区三级联动
$('.cascading-combobox:eq(0)').cascadingComboBox();
// 商品分类选择
$('.cascading-combobox:eq(1)').cascadingComboBox({
urlKey: 'data-url',
initialData: [[{id: 1, name: '电器'}, {id: 2, name: '生活用品'}], [{id: 1, name: '小家电'}, {id: 2, name: '大家电'}]]
});总结
cascading-combobox 是一款非常方便的级联下拉框插件，可以帮助我们快速实现多级联动选择的功能，适用于省市区三级联动、商品分类选择等场景。希望这篇文章能够帮助大家更好地了解和应用这个工具，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671d81e8991b448e381c