JS实现，利用两个下拉菜单，选择省份与对应城市

效果图

HTML页面代码部分

<body>省份<select id="province" onchange="showCity()"><option>省份</option><option>河南</option><option>山东</option><option>广东</option></select>城市<select id="city"><option>城市</option></select></body>

JS代码部分

<script>function showCity (){/*定义二维数组，存放城市*///城市数组要与option标签中的省份相对应，因为第一个选项就是“省份”描述，所以第一个数组用空数组即可var citys = [[],["郑州","南阳","安阳"],["蓝翔","青岛","崂山"],["深圳","广州","中山"]];/*根据选择的省份，得到这个省份中的城市数组*///获取用户选择的省份var provinceNode = document.getElementById("province");//获取选择的省份的索引var index = provinceNode.selectedIndex;//根据省份的索引从二维数组中获取到显示的城市数据，showCity是一个一维数组var showCity = citys[index];/*将城市下拉菜单中的所有标签删除*///我们需要把显示的数据显示到城市这个下拉菜单中，首先需要获取到城市下拉菜单的节点，再获取到它的子节点，也就是具体的城市，将他们删除后，再将获取到的信息显示在城市下拉菜单中//获取到城市下拉菜单的节点var cityNode = document.getElementById("city");//获取到城市下拉菜单的子节点，也就是具体的城市选项，得到的是一个子节点数组var cityChildNodes = cityNode.childNodes;//将所有的cityChilds删除，也就是城市下拉菜单中的所有元素。//for循环这里没有变量自增，是因为每当删除一个城市后，下一个城市就自动向前，所以只用一直删除第一个城市即可。for(var i = 0; i < cityChildNodes.length; ){cityNode.removeChild(cityChildNodes[i]);}/*将得到的城市数组显示在城市的下拉列表中*///将获取的城市显示到城市下拉菜单的option标签中for(var i = 0; i < showCity.length; i++){//创建一个option标签用于存放具体的城市var optionCityNode = document.createElement("option");//将查询到的城市添加到option标签中optionCityNode.innerHTML = showCity[i];//将optionCityNode标签添加到城市下拉菜单中cityNode.appendChild(optionCityNode);}}</script>

JS实现，利用两个下拉菜单，选择省份与对应城市相关推荐

html中通过定位实现下拉,JS+CSS相对定位实现的下拉菜单
本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图 ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...
vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...
html ui 下拉列表,Atitit.ui控件-下拉菜单选择控件的实现select html_html/css_WEB-ITnose...
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& mod ...
powerbuilder提示不是下拉窗口_制作简易工资查询模板，下拉菜单选择姓名即可显示...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 以前小编分享过多种工资表变工资条的方法,不知道小伙伴们都看过没有. 今天分享一个简单的工资查询模板,生成一个人的工资条,通 ...
js插件chosen-select后台交互下拉框选择
js插件chosen-select后台交互下拉框选择 $('.chosen-select').chosen(); $(".chosen-search input").bind(&q ...
利用JavaScript实现下拉菜单
实现效果:点击父级标题时下拉菜单会出现,同时其他已下拉的菜单会闭合.再次点击当前打开的父级菜单时,闭合. CSS: * {margin: 0;padding: 0; }li {list-style-t ...
用JS写二级导航（下拉菜单）
昨天学的新知识.工作有点多,没来得及总结. 今天耐心整理一下吧. 先看下效果,目前网站没有上线,凑合着看看图片吧. 下面是代码: <!DOCTYPE HTML> <html> ...
java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
本文介绍了select和sugget结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 1.首先需要引入如下文件这里要注意jquery要放在select2 ...

JS实现，利用两个下拉菜单，选择省份与对应城市

效果图

HTML页面代码部分

JS代码部分

JS实现，利用两个下拉菜单，选择省份与对应城市相关推荐

最新文章

热门文章