Cuttlefish Docs
  • 简体中文

    • spz-area 级联选择

    支持布局: container

    何时使用

    需要从一组相关联的数据进行选择，例如国家、省份和手机区号。一般用在地址薄页面。

    代码演示

    基本用法

    基础用法。一般同时用 country, province 和 areacode 三个选择框进行联动。用法说明：

    • 当是 province 或 areacode 时，需要指定一个 country-id 来标记和带有 country 属性的元素进行联动。
    • 当用户选择国家区域时，会自动将省份的选择数据更换为当前国家的省份数据，手机区号会自动切换为当前选中国家的手机区号。
    • 当国家或省份对应的元素没有写 input 的隐藏域时，会使用 country 或 province 属性作为 input 的 name 属性值来生成一个默认的隐藏域，值为空字符串或当前选中的值。
    <form method="POST" refresh-when-submit-success custom-validation="show-first-on-submit" action-xhr="/api/customers/addresses">
  <!-- ... -->
   <spz-area country id="addressesAddCountry" layout="container">
    <select name="country_code" value="" required>
      <option empty value="" selected disabled>Country</option>
    </select>
  </spz-area>

  <spz-area province layout="container" country-id="addressesAddCountry">
    <select name="province_code" value="">
      <option empty value="" selected disabled>Province</option>
    </select>
    <input type="hidden" name="province" value="">
  </spz-area>

  <spz-area areacode layout="container" country-id="addressesAddCountry">
    <select name="phone_area_code" value="">
      <option empty value="" selected disabled>Area code</option>
    </select>
  </spz-area>
  <!-- ... -->
</form>

    属性

    属性名说明类型默认值是否必需
    country-id带有 country 属性元素的IDstring-是，除了带有 country 属性的元素
    country如果元素存在该属性，表示国家区域---
    province如果元素存在该属性，表示省份区域---
    areacode如果元素存在该属性，表示手机区号区域---

    AI 摘要（LLM Ready）

    • 组件标识：spz-area
    • 用途一句话：实现级联选择。
    • 可识别属性条目：4
    • 可识别方法小节：0
    • 可识别事件小节：0
    • 关键属性名（Top）：country-id、country、province、areacode
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/