程序员经验分享-hwhale

js动态生成级联下拉列表

2023-05-16
[html] view plain copy print ?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> 下拉列表联动 </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10.   
  11. <BODY>  
  12.     <div id="sel"></div>  
  13. </BODY>  
  14. </HTML>  
  15. <script>  
  16.       
  17.   
  18.     var otext1 = document.createTextNode("类别：");  
  19.     var select = document.createElement("select");  
  20.     var selOption1 = document.createElement("option");  
  21.         selOption1.value = "0";  
  22.         selOption1.innerHTML = "----请选择-----";  
  23.     var selOption2 = document.createElement("option");  
  24.         selOption2.value = "1";  
  25.         selOption2.innerHTML = "--蔬菜--";  
  26.     var selOption3 = document.createElement("option");  
  27.         selOption3.value = "2";  
  28.         selOption3.innerHTML = "--肉类--";  
  29.     var selOption4 = document.createElement("option");  
  30.         selOption4.value = "3";  
  31.         selOption4.innerHTML = "--蛋类--";  
  32.       
  33.     select.appendChild(selOption1);  
  34.     select.appendChild(selOption2);  
  35.     select.appendChild(selOption3);  
  36.     select.appendChild(selOption4);  
  37.   
  38.     var otext2 = document.createTextNode("分类：");  
  39.     var select2 = document.createElement("select");  
  40.     select2.id = "sel2";  
  41.     var selOption11 = document.createElement("option");  
  42.         selOption11.value = "0";  
  43.         selOption11.innerHTML = "----请选择-----";  
  44.   
  45.       
  46.     select2.appendChild(selOption11);  
  47.       
  48.   
  49.     var selDiv = document.getElementById("sel");  
  50.     selDiv.appendChild(otext1);  
  51.     selDiv.appendChild(select);  
  52.     selDiv.appendChild(otext2)  
  53.     selDiv.appendChild(select2);  
  54.   
  55.     var ojson=[  
  56.             {id:1,name:'蔬菜',child:[{id:"1",name:"白菜"},{id:"2",name:"萝卜"},{id:"3",name:"菠菜"}]},  
  57.             {id:2,name:'肉类',child:[{id:"1",name:"猪肉"},{id:"2",name:"羊肉"},{id:"3",name:"牛肉"}]},  
  58.             {id:3,name:'蛋类',child:[{id:"1",name:"鸡蛋"},{id:"2",name:"鹅蛋"},{id:"3",name:"鸭蛋"}]}  
  59.         ];  
  60.   
  61.     select.onchange = function (){  
  62.           
  63.         var objs = document.getElementById("sel2");  
  64.         objs.options.length = 1;  
  65.               
  66.             var olen = ojson.length;  
  67.             for(var i=0;i<olen;i++){  
  68.                 if(this.value == ojson[i].id){  
  69.                     var ochild = ojson[i].child;  
  70.                     var ochildlen = ochild.length;  
  71.                     for(var j=0;j<ochildlen;j++){  
  72.                         var childOption = document.createElement("option");  
  73.                         childOption.value = ochild[j].id;  
  74.                         childOption.innerHTML = ochild[j].name;  
  75.                         objs.appendChild(childOption);  
  76.                     }  
  77.                 }  
  78.             }  
  79.     }  
  80.   
  81.   
  82. </script> 
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

js动态生成级联下拉列表 的相关文章

  • 使用rclone将本机文件或文件夹导入minIO

    一 背景 minio大量文件上传 xff0c 通过console xff0c web端控制台上传的话是可以的 xff0c 但是文件量太大 xff0c 效率很低 xff0c 就想办法上传服务器 xff0c 然后读取服务器文件的方式进行 二 过

  • 记录一次docker容器引起的时间相差8h的问题

    一 背景 系统打印日志时间小8h xff0c 部分插入mysql的日期却大8h xff0c 简直诡异 测试时间是上午10 05 经过排查 xff0c mysql设置的时区 xff0c 链接url设置的时区都是ok的 而且有其他服务时间正常

  • c++常见面试题30道

    转自 xff1a http blog csdn net shihui512 article details 9092439 xff1b 1 new delete malloc free 关系 delete会调用对象的析构函数 和 new 对

  • __attribute__ 机制详解

    attribute 语法的来源 GNU C 的一大特色就是 attribute 机制 attribute 可以设置函数属性 xff08 Function Attribute xff09 变量属性 xff08 Variable Attribu

  • 进程和线程的理解

    一 进程和线程的概念 xff08 一句话概述 xff09 进程 xff1a 我们运行的程序通常会对应一个或多个进程 xff0c 进程是操作系统分配内存的基本单位 线程 xff1a 一个进程通常会包含一个或多个线程 xff0c 线程是操作系统

  • ubuntu中sudo apt-get install 出现 failed to fetch

    在ubuntu中 安装samba时 xff08 sudo apt get install samba xff09 出现 failed to fetch 通过以下方式成功解决了 xff1a 我直接更新了下就解决了 通过sudo apt get

  • Docker删除镜像和容器

    一 删除容器 首先需要停止所有的容器 xff08 只停止单个时把后面的变量改为image id即可 xff09 docker stop docker ps a q 删除所有的容器 xff08 只删除单个时把后面的变量改为image id即可

  • 【读书】只读经典

    本文摘自豆瓣上 八百步 的收集的资料 xff1a http book douban com review 5289501 Ch 1 xff1a 管理 1 弗雷德里克 温斯洛 泰勒著 xff0c 科学管理的基本原理 xff0c 1911年出版

  • 卸载Docker

    一 准备工作 xff1a 1 杀死docker有关的容器 xff1a docker kill docker ps a q 2 删除所有docker容器 xff1a docker rm docker ps a q 3 删除所有docker镜像

  • IDEA2020启动Tomcat控制台中文乱码解决

    IDEA2020启动Tomcat控制台中文乱码解决 1 中文乱码原因 基本上大家安装的windows系统本地语言都是选择中文 xff08 不会有人选择英文吧 xff1f 不会吧 xff1f 不会吧 xff1f xff09 xff0c 也就是

  • MyEclipse配置Tomcat 7

    1 打开步骤 xff1a 窗口 gt 首选项 gt MyEclipse gt Servers gt Tomcat gt Tomcat 7 x 2 配置自己本地的Tomcat 7版本 3 关闭MyEclipse自带的Tomcat服务器 4 启

  • mysql之模糊查询的方法

    Mysql模糊查询正常情况下在数据量小的时候 xff0c 速度还是可以的 xff0c 但是不容易看出查询的效率 xff0c 在数据量达到百万级 xff0c 千万级的甚至亿级时mysql查询的效率是很关键的 xff0c 也是很重要的 一 一般

  • Spring Cloud限流详解

    Spring Cloud限流详解 Spring Cloud Spring Cloud 2017 12 01 在高并发的应用中 xff0c 限流往往是一个绕不开的话题 本文详细探讨在Spring Cloud中如何实现限流 在Zuul上实现限流

  • springboot启动注解

    为什么springboot不需要配置文件就可以启动成功 springboot入口SpringBootApplication是一个启动类 xff0c 主要的注解是以下的三个 xff1a 1 SpringBootConfiguration是一个

  • 如何释放linux的内存

    你们知道怎么释放linux的内存吗不知道的话跟着学习啦小编一起来学习怎么释放linux的内存 释放linux的内存的步骤 Linux下操作频繁时 xff0c 物理内存会被快速用完 xff0c 当操作结束后 xff0c 物理内存没有被正常的释

  • 跨域的五种解决方案详解

    1 跨域解决方案一 cors技术 CORS 全称cross origin resource share xff08 资源共享 xff09 工作原理 xff1a 服务器 在返回响应报文的时候 xff0c 在响应头中 设置一个允许的header

  • MySQL 日期时间类型精确到毫秒

    MySQL 常用的日期时间类型常用的是datetime timestamp 其中datetime占用5个字节 xff08 有些文档中说占用8个字节是不对的 xff0c 默认也不会保存毫秒 xff09 DATETIME和TIMESTAMP两种

  • Spring Boot——Thymeleaf

    哈喽 xff01 大家好 xff0c 我是 xff0c 一位上进心十足的 Java领域博主 xff01 的写作风格 xff1a 喜欢用 通俗易懂 的文笔去讲解每一个知识点 xff0c 而不喜欢用 高大上 的官方陈述 博客的领域是 面向后端技

  • [BZOJ3185][Coci2011][DP]kamion

    考虑转化一下问题 令 f i j k 表示从i到j恰好用了k步 xff0c 并且到j的时候火车厢为空的方案数 那么转移就是 f i j k 61 f a b k 1 f c j k 2 xff0c 转移成立当且仅当存在i gt a的边 xf

  • 查看docker 容器的端口

    查看docker 容器的端口 sudo netstat tulpn grep docker 查看指定端口 xff0c 可以结合grep命令 xff1a netstat ap grep 80 查找指定端口使用的pid fuser 80 tcp

随机推荐

  • Docker服务的停止命令(systemctl stop docker)

    停止Docker服务 停止docker服务 systemctl stop docker 非root用户使用 停止docker服务 sudo systemctl stop docker

  • Docker查找镜像版本的命令

    Docker查找镜像版本的命令 有时候想查一下镜像有哪些版本 xff0c 因为有墙 xff0c 官网一直在转圈进不去 xff0c 这时候就可以使用命令查询了 xff0c 以centos为例 xff0c 自己想要哪个更改一下命令就可以了 do

  • ES6 如何将 Set 转化为数组

    例如 xff1a const mySet 61 new Set Set 对象具有以下特征 xff1a Set 实例的成员唯一 xff0c 不会重复 Set 实例可以存储任何类型的值 xff0c 包括基本类型和对象 Set 实例是可迭代的 x

  • Request.url用法

    網址 xff1a http localhost 1897 News Press Content aspx 123 id 61 1 toc Request ApplicationPath Request PhysicalPath D Proj

  • oracle IO 优化

    数据库的作用就是实现对数据的管理和查询 任何一个数据库系统 xff0c 必然存在对数据的大量读或者写或者两中操作都大量存在 IO问题也往往是导致数据库性能问题的重要原因 在这篇文章中 xff0c 主要帮助大家在理解Oracle的读写操作机制

  • oracle中imp命令详解

    oracle中imp命令详解 Oracle的导入实用程序 Import utility 允许从数据库提取数据 xff0c 并且将数据写入操作系统文 件 imp使用的基本格式 xff1a imp username password 64 se

  • C# 非顶端窗口截图

    panel上可以通过DrawToBitmap截图 xff0c 不管是否在屏幕外是否有遮挡 Bitmap sourceBitmap 61 new Bitmap 400 300 Control ct 61 frmMain mianForm pa

  • bat中的特殊字符，以及需要在bat中当做字符如何处理

    bat中的特殊字符 xff0c 以及需要在bat中当做字符如何处理 批处理 Bat 中特殊符号的实际作用 xff0c Windows 批处理中特殊符号的作用 xff1a 64 隐藏命令的回显 在for中表示使用增强的变量扩展 xff1b 在

  • rviz无法显示的问题

    1 启用初始化配置 首先删除保存好的rviz xff0c 运行最初始化的配置 rviz运行后会选择保存在 home cbc rviz default rviz 删除之后 xff0c 重新运行 xff1a roscore rosrun rvi

  • 用C语言编写一个HTTP协议的目录浏览和文件下载服务器

    include lt stdarg h gt include lt errno h gt include lt stdio h gt include lt fcntl h gt include lt unistd h gt include

  • 编写浏览器使用的OCX全过程

    随着互联网的飞速发展 现在的人们都习惯了打开浏览器进行工作 基于WEB的程序蜂拥而至 几乎变得无所不能 由于WEB脚本语言的限制 xff0c 对于本地计算机的访问受到很大的限制 开发WEB的程序员都会因为WEB的打印而烦恼 xff0c 对于

  • Linux平台下启动oracle 11g EM控制台

    当我们的oracle服务器是使用的Linux Unix系统时 我们从windows或者其他的客户端想用启动oracle的EM工具了解一些系统系统信息时 可以采用如下方式 首先在服务器端打开一个窗口 输入如下命令 emctl start or

  • Oracle日常性能查看

    判断回滚段竞争的SQL语句 xff1a xff08 当Ratio大于2时存在回滚段竞争 xff0c 需要增加更多的回滚段 xff09 select rn name rs GETS rs WAITS rs WAITS rs GETS 100

  • Double.ToString 方法 (String)

    double numbers 61 1054 32179 195489100 8377 1 0437E21 1 0573e 05 string specifiers 61 34 C 34 34 E 34 34 e 34 34 F 34 34

  • stm32驱动微雪墨水屏1.54inch e-Paper V2

    我一起驱动墨水屏 一 墨水屏相关基础 xff08 摘自微雪官方 xff09 二 干起来PART2 配置I OPART2 底层硬件接口必要的调用函数PART3 功能函数PART4 应用函数 三 应用注意 代码下载 xff1a https do

  • 2020-11-13

    三角翼无人机制作指南设计 一 接线 飞控 xff1a pixhawk 915MHz电台 xff0c 空速计 xff0c GPS xff1b 动力 xff1a Tmotor电机 电调 F150KV700 舵机 xff1a S43A标准mini

  • docker案例redis (pull、dockerfile两种方式）

    方式一 xff08 pull xff09 01 查询redis并拉取 docker search redis 查询 docker pull redis latest 拉取 docker images 02直接使用拉取的redis建立容器 d

  • 进程、内存和文件

    进程是操作系统里面的核心概念 它指的是一个运动中的程序 从名字上看 xff0c 进程表示的就是进展中的程序 一个程序一旦在计算机里运行起来 xff0c 它就称为一个进程 操作系统对进程的管理通过进程表来实现 进程表里存放的是关于进程的一切信

  • 蓝牙、红外线与wifi 区别以及不同频段无线电磁波的穿墙和绕过障碍物能力

    蓝牙 红外线与wifi 区别以及不同频段无线电磁波的穿墙和绕过障碍物能力 SurgePing 2015 04 22 16 52 30 35199 收藏 7 分类专栏 xff1a IOT 文章标签 xff1a 蓝牙 红外线 wifi 频段 无

  • js动态生成级联下拉列表

    html view plain copy print lt DOCTYPE HTML PUBLIC 34 W3C DTD HTML 4 0 Transitional EN 34 gt lt HTML gt lt HEAD gt lt TIT

热门标签