基于 Yii 框架实现省市二级联动

本篇介绍如何在 Yii 框架中实现省市二级联动功能,并提供最新省市数据。

数据准备

首先,我们需要准备最新的省市数据,数据格式可以是 JSON 或者数组。 为了方便演示,这里以 JSON 格式为例:

[
    {
        "id": 1,
        "name": "北京市",
        "children": [
            {
                "id": 11,
                "name": "北京市"
            },
            // ...其他区县
        ]
    },
    // ...其他省份
]

前端实现

  1. 引入 jQuery 和 Yii Ajax 组件: 确保页面中引入了 jQuery 和 Yii 的 Ajax 组件。
  2. 创建下拉菜单: 创建两个下拉菜单,分别用于选择省份和城市。
  3. 绑定事件: 使用 jQuery 为省份下拉菜单绑定 change 事件。当省份选择发生改变时,触发 Ajax 请求,根据选择的省份 ID 获取对应的城市数据。
  4. 动态更新: 将获取到的城市数据动态填充到城市下拉菜单中。

后端实现

  1. 创建控制器: 创建一个控制器,用于处理前端的 Ajax 请求。
  2. 编写 Action: 在控制器中编写一个 Action 方法,接收省份 ID 参数,并返回对应的城市数据 (JSON 格式)。

代码示例

前端代码 (示例):

<?php
use yiihelpersUrl;

$this->registerJs(<<').text(value.name).attr('value', value.id));
                });
            }
        });
    });
JS);
?>

<select id="province">
    
    <?php foreach ($provinces as $province): ?>
        
    <?php endforeach; ?>
</select>

<select id="city">
    
</select>

后端代码 (示例):

public function actionGetCities($id)
{
    // 根据省份 ID 查询城市数据
    $cities = City::find()->where(['province_id' => $id])->all();

    // 返回 JSON 格式的城市数据
    return yiihelpersJson::encode($cities);
}

总结

通过以上步骤,我们可以轻松地在 Yii 框架中实现省市二级联动功能。 这只是基本实现,您可以根据实际需求进行扩展和优化,例如:

  • 使用异步加载提升用户体验
  • 添加数据校验和错误处理
  • 支持更多级联动
zip 文件大小:370.83KB