---
order: 9
zh-CN:
	title: 城市级联
	zj: 浙江省
	hz: 杭州市
	xh: 西湖区
	wz: 温州市
	lw: 龙湾区
	xj: 新疆维吾尔自治区
	be: 博尔塔拉蒙古自治州
	al: 阿拉山口市
	jl: 吉林省
	bs: 白山市
	jy: 江源区
	nx: 宁夏回族自治区
	pro: 省
	city: 市
	dis: 区
en-US:
	title: City Cascader Usage
	zj: Zhejiang
	hz: Hangzhou
	xh: Xihu
	wz: Wenzhou
	lw: Longwan
	xj: Xinjiang
	be: Bortala
	al: Alashankou
	jl: JiLin
	bs: BaiSam
	jy: JiangYuang
	nx: NingXia
	pro: Province
	city: City
	dis: District
---

```js
import { TabsCascader } from 'zent';

class Simple extends React.Component {

	state = {
		value: ['330000', '330100', '330106'],
		options: [
			{
				value: '330000',
				label: '{i18n.zj}',
				children: [
					{
						value: '330100',
						label: '{i18n.hz}',
						children: [
							{
								value: '330106',
								label: '{i18n.xh}'
							}
						]
					},
					{
						value: '330200',
						label: '{i18n.wz}',
						children: [
							{
								value: '330206',
								label: '{i18n.lw}'
							}
						]
					}
				]
			},
			{
				value: '120000',
				label: '{i18n.xj}',
				children: [
					{
						value: '120100',
						label: '{i18n.be}',
						children: [
							{
								value: '120111',
								label: '{i18n.al}'
							}
						]
					}
				]
			},
			{
				value: '130000',
				label: '{i18n.jl}',
				children: [
					{
						value: '120100',
						label: '{i18n.bs}',
						children: [
							{
								value: '120111',
								label: '{i18n.jy}'
							}
						]
					}
				]
			},
			{
				value: '140000',
				label: '{i18n.jl}',
				children: [
					{
						value: '120100',
						label: '{i18n.bs}',
						children: [
							{
								value: '120111',
								label: '{i18n.jy}'
							}
						]
					}
				]
			},
			{
				value: '150000',
				label: '{i18n.jl}',
				children: [
					{
						value: '120100',
						label: '{i18n.bs}',
						children: [
							{
								value: '120111',
								label: '{i18n.jy}'
							}
						]
					}
				]
			},
			{
				value: '160000',
				label: '{i18n.nx}',
				children: [
					{
						value: '120100',
						label: '{i18n.bs}',
						children: [
							{
								value: '120111',
								label: '{i18n.jy}'
							}
						]
					}
				]
			},
		]
	}

	onChange = (value, selectedOptions, meta) => {
		console.log(value, selectedOptions, meta)
		this.setState({
			value,
		});
	}

	render() {
		return (
			<TabsCascader
				value={this.state.value}
				options={this.state.options}
				onChange={this.onChange}
				clearable
				title={[
					'{i18n.pro}',
					'{i18n.city}',
					'{i18n.dis}'
				]}
			/>
		);
	}
}

ReactDOM.render(
	<Simple />
	, mountNode
);
```