版本一

效果

开始的时候

当省份这里的下拉框选择以后，城市下拉框会自动加载新的数据

源码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><select name="province" id="province"><option value="hb">湖北</option><option value="hn">湖南</option>
</select><select name="city" id="city"><option value="">---城市---</option>
</select><script>var pro2city = {"hb":["武汉","十堰"],"hn":["长沙","夷陵"]}// 获取标签对象var province = document.getElementById("province");// 绑定事件// province.onchange = function () {province.onclick = function () {// province.onmouseover = function () {// 拿到选中的value值var name = province.value;// 找到对应的城市列表var citys = pro2city[name];console.log(citys);// 把数组中的成员// 清空选项的内容var cityEle = document.getElementById("city");  //拿城市的选择框cityEle.innerHTML = "";// 添加一个东西的测试// // 创建一个空的option标签，名字为暂时的// var optEle = document.createElement("option");// optEle.text = '随便占位置的';// cityEle.append(optEle);// 开干// 遍历对应的城市数组for(var i=0;i<citys.length;i++){var optEle = document.createElement("option");optEle.text = citys[i];cityEle.append(optEle);}}</script>
</body>
</html>

版本二

启航版

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var shenArr = new Array();  // []  shenArr = {}shenArr["广东"] = ["广州","深圳","珠海","汕头"];shenArr["湖南"] = ["长沙","株洲","张家界","邵阳"];shenArr["湖北"] = ["武汉","宜昌","荆州","仙桃"];shenArr["安徽"] = ["合肥","黄山"];shenArr["河南"] = ["郑州","洛阳"];console.log(shenArr)console.log(shenArr.湖北)function getShen() {var s = document.getElementById("shen");for(var v in shenArr) {s.add(new Option(v));   //<option>广东</option>// s.options.add(new Option(v));}}function getCity(){var s = document.getElementById("shen");var c = document.getElementById("city");var v = s.value; //省市名称，数组中的键c.options.length=0;//清除cityfor(var i in shenArr[v]){c.add(new Option(shenArr[v][i]));}}</script>
</head><body onload="getShen()"><select id="shen" onchange="getCity()"><option value="0">--请选择--</option></select><select id="city">--请选择--</select>
</body>
</html>

javascript-演练-二级联动下拉框相关推荐

JavaScript实现二级联动下拉菜单
最近学习前端js,做了一个二级联动下拉菜单.二级下拉菜单的内容随着一级下拉菜单选项的更改而更改.菜单的内容是手动存在js的数组里的,随便写了几个数据. 效果图: 实现源码: <!DOCTYPE ...
利用ajax实现二级联动下拉框6,Ajax实现二级联动菜单
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时 ...
jquery二级联动下拉框
html代码片段 <div class="form-group"><div class=" col-xs-12 col-sm-3 col-md-3 co ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
Android实现联动下拉框
Android实现联动下拉框,二级地市联动下拉框日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级 ...
html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...
javascript实现下拉条联动_js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 String path = request.getContextPath(); String basePath = ...
javascript实现下拉条联动_js实现多级联动下拉框
花了半天时间实现一个多级联动下拉框,目的是对某一植物进行"门纲目科属"的归类.使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的, ...
使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...

javascript-演练-二级联动下拉框

版本一

版本二

javascript-演练-二级联动下拉框相关推荐

最新文章

热门文章