README

dependent-dropdown

一个多级依赖下拉菜单jQuery插件，允许嵌套依赖。该插件允许您将基于另一个输入/一组输入的值选择的选项转换为正常的选择输入。它既适用于正常的选择选项，也适用于具有optgroups的选择。

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

功能

在select元素上应用插件，并将依赖项设置为一个或多个其他输入/select元素（包括依赖项嵌套）。
自动将具有class "depdrop"的选择输入转换为依赖下拉菜单。插件支持HTML5数据属性来配置依赖下拉菜单选项。
自动根据预选值初始化依赖下拉菜单（适用于更新场景）。
支持具有基本options的选择输入和具有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"

或添加

"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.com/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'
});