博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
多级<select>选择的实现(利用selectedIndex属性)
阅读量:7109 次
发布时间:2019-06-28

本文共 776 字,大约阅读时间需要 2 分钟。

hot3.png

希望实现的功能:当用户做板块选择时,分类选项栏会显示相应的可选选项

下面是html部分:

板块:
分类:

下面是js部分:

算法思路:

  1. 分类选项栏会罗列出全部的选项,不过在一开始时,所有选项均为“display:none”不予显示。
  2. 在用户每次点击板块选项栏时触发js,x选择器得到板块选项栏的索引值,y选择器得到所有的选项元素。
  3. 根据x得到的不同索引值,创建不同的数组,数组中包含的是要显示的选项的排序号
  4. js将从1-40(选项个数最大值)进行遍历,判断是否存在于数组中,如果存在即显示该条选项,否则不显示。并且会将最后一个选项作为默认选项。
  5. hyherror()函数主要为了处理当用户什么都不选时,默认选项为空,导致后续的操作错误。该事件绑定于两个按钮上,点击按钮时会先判断用户是否没有选择正确的选项,如果没有,则会给选项卡赋默认值。如果否,则正常操作按钮。

keys:

  1. getElementsByName获取多个dom
  2. selectedIndex属性,<select>的这个属性可以避免我们需要更复杂的代码进行传值,它告诉了我们第一个select选择了什么
  3. selected="selected"定义select标签默认值

转载于:https://my.oschina.net/HeYuhui/blog/632433

你可能感兴趣的文章
Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)
查看>>
客户端测试
查看>>
Spring与MyBatis结合使用
查看>>
Linux内核分析第三周学习总结
查看>>
Python字符串
查看>>
spring cloud学习(五)断路器 Hystrix
查看>>
configure: error: C preprocessor "arm-linux-gnueabihf-g++" fails sanity check
查看>>
Android简单的monkey测试
查看>>
面向对象编程(封装、封装的意义、封装与扩展性、@property)
查看>>
教你如何分辨用户是用手机还是电脑访问你的网站
查看>>
[原]iOS7.1获取图库所有照片的方法封装
查看>>
[转]Linux下scp的用法
查看>>
[leetcode-532-K-diff Pairs in an Array]
查看>>
iTextSharp 生成PDF
查看>>
基于胜任力模型为集团企业构建动态信息安全培训课程体系
查看>>
PHP的项目-毕业生论文选题系统
查看>>
yii2 url 美化参数
查看>>
20151130test->20160530
查看>>
Android学习笔记(二三): 多页显示-Flipper的使用
查看>>
天梯赛 - L2-001 紧急救援
查看>>