IQ——是否做过三级联动的下拉菜单,简述实现流程?

2024-04-14 21:08

本文主要是介绍IQ——是否做过三级联动的下拉菜单,简述实现流程?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

描述

有做过三级级联菜单,使用的前端AngularJs技术来实现的,主要通过内置对象$watch来监听上级菜单是否发生变化。实现关键还需要:数据库表中添加一个字段,用于存储父级id,且将其称作printId

一级:
1)即printId = 0
2)查询数据库中所有的printId = 0的数据,组成一级下拉列表。
二级:
1)即prinId = 一级对象的id
2)使用$watch监听一级菜单的id,如果发生变化,通过该一级id,重新获取二级下拉列表
三级:
1)即prinId = 二级对象的id
2)使用$watch监听二级菜单的id,如果发生变化,通过该二级id,重新获取三级下拉列表

注意:如果使用的原生JS,原理是一样的,但是重新获取二级下拉列表时,需要将上一次的二级下拉列表删除,不然会累计(不是覆盖)

代码

附上AngularJS实现三级联动的代码,便于理解

/获取三级联动列表//获取一级$scope.selectItemCat1List=function () {itemCatService.findByParentId(0).success(function (response) {$scope.itemCat1List=response;});}//获取二级$scope.$watch('entity.goods.category1Id',function (newValue, oldValue) {//不是o,就表示选择了一级分类if(newValue){itemCatService.findByParentId(newValue).success(function (response) {$scope.itemCat2List = response;});}});//获取三级$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) {//判断二级分类有选择具体分类值,在去获取三级分类if(newValue){//根据选择的值,查询二级分类itemCatService.findByParentId(newValue).success(function(response){$scope.itemCat3List=response;});}});

附上二级省市联动的代码,以便对比

<script type="text/javascript">$(function(){//一维数组存储省份信息var pros = ["四川","新疆","内蒙古"];//二维数组存储城市信息var cities = [["成都","绵阳","攀枝花"],["乌鲁木齐","吐鲁番","伊犁"],["呼和浩特","包头","鄂尔多斯"]];//读取省份信息for(var i=0;i<pros.length;i++){var option = $("<option value='"+i+"'>"+pros[i]+"</option>");$("#province").append(option);}//省份改变时,读取对应的城市信息$("#province").change(function(){//将城市下拉列表的内容清理掉,html()效果同innerHTML,text()效果同innerText$("#city").html("<option>--请选择--</option>");var index = $(this).val();//cities[index]根据索引取出的城市的信息,是一个数组for(var i=0;i<cities[index].length;i++){var option = $("<option>"+cities[index][i]+"</option>");$("#city").append(option);}});});
</script>

这篇关于IQ——是否做过三级联动的下拉菜单,简述实现流程?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/904026

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Ubuntu 24.04启用root图形登录的操作流程

《Ubuntu24.04启用root图形登录的操作流程》Ubuntu默认禁用root账户的图形与SSH登录,这是为了安全,但在某些场景你可能需要直接用root登录GNOME桌面,本文以Ubuntu2... 目录一、前言二、准备工作三、设置 root 密码四、启用图形界面 root 登录1. 修改 GDM 配

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录