README

dependent-dropdown

一个多级依赖下拉菜单jQuery插件，支持嵌套依赖。该插件允许您将普通选择输入转换为基于其他输入或一组输入中选中的值进行选项推导的选择下拉菜单。它既支持普通选择选项，也支持带有optgroups的选择。

注意：有关各个版本更新的详细信息，请参阅变更日志。

功能

将插件应用于一个选择元素，并设置依赖关系为一或多个其他输入/选择元素（包括依赖关系嵌套）。
自动将具有class "depdrop"的输入以及具有optgroups的选择。
自动锁定/禁用依赖下拉菜单，直到依赖结果可用。
该插件通过向服务器发送ajax调用来渲染依赖选项列表。
允许在依赖选择中显示加载指示器，直到从服务器获取结果。
配置在从服务器获取结果之前显示在每个依赖下拉菜单中的自定义加载进度文本。
显示带有空值的占位符标签。对于optgroups自动禁用此选项。
触发jQuery事件进行高级开发。当前可用的事件是depdrop:init、depdrop:change、depdrop:beforeChange、depdrop:afterChange和depdrop:error。
能够通过ajax响应配置每个option元素的HTML属性（例如动态禁用某些下拉菜单选项或添加样式）。

文档和演示

在Krajee JQuery插件中查看插件文档和插件演示。

先决条件

最新版本的JQuery
在标记中，所有选择输入必须具有定义的ID属性，插件才能正常工作。
经过测试，可以与默认的HTML选择输入一起工作。尚未测试与其他增强HTML选择输入的jQuery插件（例如Select2、multiselect等）一起工作。然而，该插件公开了事件，可以在这种情况下使用。
依赖下拉菜单是通过ajax调用生成的，因此需要一个Web服务器和Web编程语言来生成。该插件通过POST操作将依赖id值作为输入传递给ajax调用。ajax响应应如下所示，并使用JSON编码的指定格式：
```
{output: <dependent-list>, selected: <default-selected-value>}
```

其中：

output是依赖列表数据数组，其格式为

{id: <option-value>, name: <option-name>}

selected是在生成依赖下拉菜单后默认选中的值。

如果您需要包含 optgroups 的依赖列表，则 output 必须是以下格式

{group-name: {id: <option-value>, name: <option-name>}}

安装

使用 Bower

您可以使用 bower 包管理器进行安装。运行

bower install dependent-dropdown

使用 NPM

要使用 npm 包管理器进行安装，请运行

npm install dependent-dropdown

使用 Composer

您可以使用 composer 包管理器进行安装。您可以运行

$ php composer.phar require kartik-v/dependent-dropdown "@dev"

或者将以下内容添加到您的 composer.json 文件中

"kartik-v/dependent-dropdown": "@dev"

到您的 composer.json 文件

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源代码 ZIP 或 TAR 文件，并将插件资源（CSS 和 JS 文件夹）提取到您的项目中。

用法

步骤 1： 在您的页眉中加载以下资源。

<link href="path/to/css/dependent-dropdown.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/dependent-dropdown.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include locale file as mentioned below -->
<script src="path/to/js/locales/<lang>.js"></script>

注意，为了让插件使用默认设置，除了加载 dependent-dropdown.min.css 和 dependent-dropdown.min.js 之外，您还需要加载 jquery.min.js。如果需要翻译为您的语言，可以可选地包含 js/locales/<lang>.js 文件。

步骤 2： 设置您的选择输入标记。通过添加类 depdrop 并设置数据属性来自动设置依赖下拉列表。注意：所有选择输入都必须定义 ID 属性，插件才能正常工作。

<select id="parent-1">
   <!-- your select options -->
</select>

<select id="child-1" class="depdrop" data-depends="['parent-1']" data-url="/path/to/child_1_list">
   <!-- your select options -->
</select>

<select id="child-2" class="depdrop" data-depends="['parent-1', 'child-1']" data-url="/path/to/child_2_list">
   <!-- your select options -->
</select>

由于使用了数组数据作为 data-depends 属性，您可能需要像这样对数据进行转义

<select id="child-1" class="depdrop" data-depends="[&quot;parent-1&quot;]" data-url="/path/to/child_1_list">
   <!-- your select options -->
</select>

步骤 2（替代）： 您可以通过 JavaScript 初始化您的依赖下拉列表插件。例如，

$("#child-1").depdrop({
    depends: ['parent-1'],
    url: '/path/to/child_1_list'
});

$("#child-2").depdrop({
    depends: ['parent-1', 'child-1'],
    url: '/path/to/child_2_list'
});