使用 Stimulus、Turbo.js 和 Tailwind CSS 构建级联选择器

本文将带你一步步了解如何使用 Stimulus、Turbo.js 和 Tailwind CSS 创建一个功能强大的级联选择器。级联选择器在 web 应用程序中非常常见，它允许用户从多个相关选项列表中选择，每个选项的选择都会影响后续的选项列表。

步骤 1：项目设置

首先，你需要一个使用 Stimulus、Turbo.js 和 Tailwind CSS 的新项目。如果你还没有，可以使用以下命令创建一个新的 Rails 项目：

rails new my_project

然后，安装必要的 gems：

bundle add stimulus turbo-rails tailwindcss-rails

步骤 2：Tailwind CSS 配置

在 app/javascript/application.css 文件中添加 Tailwind CSS 的配置：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 3：创建级联选择器组件

创建一个名为 cascader 的新 Stimulus 控制器，并将其放置在 app/javascript/controllers/cascader_controller.js 中：

export default class extends Controller {  static targets = ['select1', 'select2'];

  connect() {    this.select1Target.addEventListener('change', this.updateSelect2.bind(this));  }

  updateSelect2() {    const selectedValue = this.select1Target.value;    // 使用 Ajax 请求获取与 selectedValue 相关的选项列表    // 然后将选项列表更新到 select2Target  }}

**步骤 4：使用级联选择器组件**

在你的视图中，添加以下代码来使用 `cascader` 控制器：

```html<div data-controller='cascader'>  <select data-cascader-target='select1'>    <option value=''>请选择...</option>    <option value='option1'>选项 1</option>    <option value='option2'>选项 2</option>  </select>

  <select data-cascader-target='select2'>    <option value=''>请选择...</option>    // 选项列表将根据 select1 的选择动态更新  </select></div>

**步骤 5：添加样式**

使用 Tailwind CSS 为你的级联选择器添加样式，使其符合你的设计规范。

**总结**

通过使用 Stimulus、Turbo.js 和 Tailwind CSS，你可以轻松地创建功能强大的级联选择器，为你的 web 应用程序提供流畅的用户体验。本指南仅提供了一个基本示例，你可以根据自己的需求进行扩展和自定义