Stimulus 和 Turbo JS 实现高效级联选择器

Stimulus 和 Turbo JS 是两个 JavaScript 库，分别用于增强页面的交互性和性能。虽然它们的功能不同，但可以很好地结合使用，以实现更高效的页面交互。

下面是一个使用 Stimulus 和 Turbo JS 实现 Cascader 级联选择器的示例：

HTML 代码：

<div data-controller='cascader' data-cascader-options='{"url": "/api/cascader"}'>
  <select data-cascader-target='level1'></select>
  <select data-cascader-target='level2'></select>
  <select data-cascader-target='level3'></select>
</div>

JavaScript 代码：

import { Controller } from 'stimulus';
import Turbo from '@hotwired/turbo';

export default class extends Controller {
  static targets = ['level1', 'level2', 'level3'];
  static values = { url: String };

  connect() {
    this.fetchOptions('');
  }

  async fetchOptions(value) {
    const url = `${this.urlValue}?value=${value}`;
    const response = await fetch(url);
    const options = await response.json();
    this.setOptions(options);
  }

  setOptions(options) {
    this.level1Target.innerHTML = this.buildOptions(options.level1);
    this.level2Target.innerHTML = '';
    this.level3Target.innerHTML = '';
  }

  buildOptions(options) {
    return options
      .map((option) => `<option value='${option.value}'>${option.label}</option>`)
      .join('');
  }

  async level1Changed() {
    const value = this.level1Target.value;
    this.fetchOptions(value);
  }

  async level2Changed() {
    const value = this.level2Target.value;
    this.fetchOptions(value);
  }

  async level3Changed() {
    const value = this.level3Target.value;
    Turbo.visit(`/result?value=${value}`);
  }
}

在上面的代码中，我们使用 Stimulus 的 Controller 类定义了一个 cascader 控制器，它包含了三个下拉框，分别对应级联选择器的三个级别。我们还定义了一个 url 值，用于指定获取选项数据的 API 地址。

在控制器连接到页面时，我们会调用 fetchOptions 方法获取第一级选项列表。当第一级选项列表改变时，我们会调用 level1Changed 方法获取第二级选项列表，以此类推。当第三级选项列表改变时，我们会使用 Turbo JS 进行页面跳转，以显示选项结果。

为了方便起见，我们还使用了一个 buildOptions 方法，用于将选项数据转换为 HTML 代码。我们在 HTML 代码中使用了 data-cascader-options 属性，用于指定级联选择器的配置选项。

最后，我们需要在页面中引入 Stimulus 和 Turbo JS 的相关库文件，以及我们自己编写的 JavaScript 代码。