avue 实现下拉框事件 自动填充其他框_简单三级联动的实现

本文详细介绍了如何使用avue实现三级联动下拉框功能,包括页面创建、数据请求、事件触发及js函数执行。通过选择省、市,动态加载对应的市、区/县信息,涉及到ajax请求、数据库设计以及MVC架构下的项目分层实现。
摘要由CSDN通过智能技术生成

1825deda2112536c5d1aa2f9b500f9c5.png

当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是这样的三级联动,当然也会有更简单的插件方法,但学习,我们可以通过这来看它运行的过程。我么要实现的需求是这样的:

  • 页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
  • 选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
  • 出现对应的该市下面的区/县信息

分析这个实现过程大致可以这样:

  • 1、创建页面:页面中有三个下拉框,分别为省、市、区/县
  • 2、页面加载成功发起ajax请求,请求省的信息,并将响应结果 填充到省下拉框中
  • 3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求 请求该省下的市信息,并将响应数据填充到市下拉框
  • 4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求 请求该市下的区/县信息,并将数据填充到区/县下拉框中

数据库呢我们可以这样去构建:

创建表(area):存储了省、市、区/县信息

  • 设计表实现
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值