当前位置:首页志下拉搜索软件

运用js如何制作一个联动的下拉框

更新时间:2019-05-19 12:47  作者:  来源:  点击:1

欢迎点击「算法与编程之美」关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

学习HTML时初学会了静态的基本下拉框,但是无法实现联动。在学习了js的dom后,我学习到了如何使用js的dom将普通的下拉框实现联动,就是选择域的指向性,例如:选择性别时只会出现男女,选择身份时只会出现群众、党员,而不会出现其他,就是用下拉框实现的一个键值对的选择项,下面我来介绍如何制作一个可以指定区域的下拉框。

解决方案

首先需要写一个基础的下拉框,注意赋予id的命名,基础下拉框代码如下:

下面需要联动js的dom,为这个基础的下拉框赋予基础的指向值,id为“province”的下拉框为键,id为“city”的为值,下面展示js的dom代码:

联动js,将“province”的值运用多分支联合“city”的值,为每个键赋予值,效果如下:

结语

先建立基础下拉框,再用js建立函数,用js的dom将基础下拉框和js函数联动其起来,函数中用js的多分支和数组为每个键的下拉框指定值,最后使用遍历实现每个键值的对应。

注意细节联合,最好使用合适的英文命名为id,可以在后期减少一定的分析和思考。


[推荐朋友] [打印本稿]
上一篇文章: 阚清子在商场被围观,镜头往下拉,网友:这腿真实存在吗?  下一篇文章: 爆笑校园:“新式餐巾”了解一下,拉风酷炫还可以防止弄脏衣服!

世间因爱而美好 »