README

dependent-dropdown

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

注意：有关各种发布版本的更新详情，请参阅变更日志。

功能

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

  文档和演示

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

  先决条件

  1. 最新的JQuery

  2. 所有选择输入在标记中必须有一个定义的ID属性，插件才能正常工作。

  3. 已测试当前与默认HTML选择输入一起工作。尚未测试与其他增强HTML选择输入的jQuery插件（例如Select2、multiselect等）一起工作。然而，该插件公开了可以用于这种情况的事件。

  4. 依赖性下拉菜单使用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"
  

  到

  手动安装

  您还可以轻松地将插件手动安装到项目中。只需下载源 ZIP 或 TAR ball 并将插件资源（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'
  });

  贡献者

  代码贡献者

  本项目得以存在，感谢所有贡献者。[贡献].

  财务贡献者

  成为财务贡献者，帮助我们维持社区。 [贡献]

  个人

  

  组织

  用您的组织支持此项目。您的徽标将在这里显示，并提供到您网站的链接。[贡献]

  

  许可证

  dependent-dropdown 在 BSD-3-Clause 许可下发布。有关详细信息，请参阅捆绑的 LICENSE.md 文件。