之前的项目需要实现多级联动的下拉列表选择控件，网上找了许久，没发现有太多符合需求的实现，所以自己造了个轮子，并命名为CascadingDropDownList，现将其分享出来，供大家参考。
项目地址：https://github.com/Kidwind/jquery-cascadingDropDownList/
简介
CascadingDropDownList是一款jQuery插件，用于将一个表单元素（通常为<input type="hidden" />）转换为联动的下拉选择列表，用以实现类似于省、市、县联动的下拉列表。
特点
-
将一个表单元素（通常为<input type="hidden" />）转换为多级下拉选择列表控件的方式体现，以实现友好的选值方式，并将选择值写回表单元素。
PS：网上找到的现成的插件多是将多个<select>元素硬编码，然后通过程序将他们关联，这对于我们的应用来存在两个问题：一是不确定层级数量的树型结构，或不同节点层级数量不等的情况；二是表单通常是服务端将Model自动转化的，在服务端一个关联树的字段通常转化为表单时也仅是一个对应的元素，多级选择只是一种表现形式，便于用户操作而已，最终存到数据库的时候也只存最后选定的那个节点的值，选定节点的上级节点都是可以推导出来的，所这种形式更适合我们的应用。 -
无限层级的支持。
-
按需要异步数据加载，避免数据量大时一次性加载造成用户过长的等待时间。
-
根据表单元素默认值，自动回显下拉选择列表的默认值。
使用方法
- 载入Javascript文件。
<script src="jquery.js"></script>
<script src="cascadingDropDownList.js"></script>
- 调用CascadingDropDownList。
<!--假设html元素如下 -->
<input type="hidden" name="area" value="6" id="id_area" />
$("#id_area").cascadingDropDownList({ dataLoadUrl:"/loaddata", pathLoadUrl:"/loadpath" });
参数说明
| 参数名 | 默认值 | 说明 |
|---|---|---|
| selectorContainer | null | 所有下拉列表选择器的容器对象，如果不指定，则在表单元素后创建一个容器。 |
| dataLoadUrl | null | 下拉选择列表选项数据的加载URL地址，返回值应为[{text: "text", value: "value", childCount: 1}, ...] |
| pathLoadUrl | "" | 根据联动下拉列表的值，获取每一级选择器所对应的选择值，返回值应为["selector1Value", "selector2Value", ..., "selectoNValue"] |
| initSelectorAmount | 1 | 初始选择器的数量 |
| onlySelectLeaf | false | 仅允许选择叶节点（如果选择的是非叶节点，则不会触发联动下拉列表值的更改） |
| parentIdParmKey | "pid" | 加载选择器的选项值时请求dataLoadUrl时的上级选项的参数名称 |
| idParmKey | "id" | 获取每一级选择器所对应的选择值时请求pathLoadUrl的联动下拉列表的值的参数名称 |
| loadingText | "正在加载，请稍后..." | 正在加载的提示文本 |
| customPromptText | "-请选择-" | 选择器未选定任何值时的默认提示文本 |
| promptTexts | null | 每一级选择器未选定任何值时的提示文本，为一个数组对象，如：["-省-", "-市-", "-县-"] |
API接口
| 方法 | 说明 |
|---|---|
| clearValue() | 清除联动下拉选择列表的值。 |
| setValue(val) | 设置联动下拉选择列表的值。<br />val:要设置的值。 |
| setDataLoadUrl(url) | 设置下拉选择列表选项数据的加载URL地址。<br />url:要设置的下拉选择列表选项数据的加载URL地址。 |
| destroy() | 销毁对象。 |
API调用方式如下：
$("#id_area").cascadingDropDownList("setValue", "450105");
网友评论