js进阶 9-12  js如何实现级联菜单 （章节测试）

一、总结

一句话总结：

1、js如何实现级联菜单 ？

二维数组，以第一级菜单的文本值做键，以对应的二级菜单选项的文本做值

2、用哪个属性可以获取一个元素的文本值？

text

二、js进阶 9-12  js实现级联菜单

1、案例说明：多级联菜单

  • 使用二维数组和下拉菜单相结合，实现多级联动菜单

2、相关知识点：Select 下拉列表

Select 对象集合
  • options[]返回包含下拉列表中的所有选项的一个数组
Select对象属性
  • length返回下拉列表中的选项数目
  • multiple 设置或返回是否选择多个项目。
  • selectedIndex 设置或返回下拉列表中被选项目的索引号。
  • size 设置或返回下拉列表中的可见行数。
  • id/name/disabled/form/tabIndex
Select 对象方法
  • add() 向下拉列表添加一个选项。

    语法：selectobject.add(option,before)

  • remove() 从下拉列表中删除一个选项.

    语法: selectobject.remove(index)

  • blur()/focus()
Option 对象的属性
  • defaultSelected 返回 selected属性的默认值。
  • index 返回下拉列表中某个选项的索引位置。
  • Selected 设置或返回 selected 属性的值。
  • text 设置或返回某个选项的纯文本值。
  • disabled/form/id/value......

3、截图和代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

 </head>

 <body>

 <form action="" name="form1">

     <select name="sel1" onchange="changeMenu()">

         <option  selected>水果</option>

         <option >蔬菜</option>

         <option >肉类</option>

     </select>

     <select name="sel2">

         <option >葡萄</option>

         <option >苹果</option>

         <option >西瓜</option>

     </select>

 </form>

 <script type="text/javascript">

     var arr=[];

     arr['水果']=['葡萄','苹果','西瓜'];

     arr['蔬菜']=['萝卜','茄子','番茄'];

     arr['肉类']=['猪肉'];

     // alert(arr['水果'])

     // alert(arr['蔬菜'])

     // alert(arr['肉类'])

     function changeMenu(){

         var sel1=document.form1.sel1

         // alert(sel1.options[sel1.selectedIndex].text)

         var list=arr[sel1.options[sel1.selectedIndex].text]

         // alert(list)

         var menu=document.form1.sel2;

         remove(menu);

         for(var i=0;i<list.length;i++){

             menu[i]=new Option(list[i],list[i])

         }

     }

     function  remove(menu){

         for(var i=0;i<menu.options.length;i++){

                 menu.options[i]=null;

             }

     }

 </script>

 </body>

 </html>
 

js进阶 9-12 js如何实现级联菜单 （章节测试）的更多相关文章

  1. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  2. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  3. js进阶 11-22/23 js如何实现选项卡

    js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...

  4. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  5. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  6. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  7. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  8. 前端进阶（12） - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  9. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

随机推荐

  1. Android中实现整个视图切换的左右滑动效果

    Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现.   项目 ...

  2. Oracle调用Java类开发的存储过程、函数的方法

    oracle调用java类的基本步骤 1. 编写java代码,后续可以直接使用java代码,class文件或者jar包 2. 将写好的java代码导入到oracle数据库中,有两种方法:一种是使用lo ...

  3. 关于React中,map出来的元素添加事件问题

    用es6 map 的写法 直接绑定一个onTouchStart 事件不会报错. 用es5的map写法  如果不加上this  会报这个错误 无法读取未定义的属性 解决的方法是 绑定this  就可以了

  4. jfreechart,pdf生成组件iText,jasper report报表组件及POI操作excel等在企业软件开发中常遇到的第三方应用

    熟悉WEB Service ,Ajax,DWR,JQuery,iBatis等技术,熟练TOMCAT,IIS,JBoss,WebLogic等服务器 图表组件JFreeChart PDF组件-iText的 ...

  5. [Vue + TS] Write a Vue Component as a Class in TypeScript

    Starter app: https://github.com/alexjoverm/Vue-Typescript-Starter Writing Vue components as plain ob ...

  6. 【部分原创】python实现视频内的face swap(换脸)

    1.准备工作,按博主的环境为准 Python 3.5 Opencv 3 Tensorflow 1.3.1 Keras 2 cudnn和CUDA,如果你的GPU足够厉害并且支持的话,可以选择安装 那就先 ...

  7. angular 响应式自定义表单控件—注册头像实例

    1. 组件继承ControlValueAccessor,ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值,获取表单的元素的元素值 regi ...

  8. Geodatabase模型

    原文 Geodatabase模型 地理数据模型是地理实体及其关系的形式化抽象和数学描述.随着数据库.面向对象等技术的发展,面向对象的地理数据模型成为大型空间数据库的首选方案,它克服了传统地理数据模型的 ...

  9. HDU 1496 Equations hash HDU上排名第一！

    看题传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1496 题目大意: 给定a,b,c,d.a*x1^2+b*x2^2+c*x3^2+d*x4^2=0 ...

  10. sublime课程3 emmet插件中的常用符号有哪些

    sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...