web前端必学功法之一：省市联动

案例：js实现下面功能

        **<!-- 省市联动思路分析：1.准备元素：定义省份与城市的下拉框2.绑定事件：绑定省份下拉框的change事件3.准备数据：准备数组存放省份信息,定义二维数组存放城市数据4.初始化数据：将数组中的省份数据填充到省份下拉框中5.下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市数据，并填充到城市下拉框中创建文本节点  createTextNode()创建元素      createElement()追加子元素      appendChild()实现步骤1.定义省份与城市下拉框的元素2.定义省份与城市下拉框所需要的数据（数组与二维数组）3.填充省份下拉框的数据3.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应5.通过选中的值(索引) 获取二维数组中对应的数组6.清空城市下拉框的选中7.遍历城市数组的数据，填充城市下拉框的值8.创建元素节点，创建文本节点，将文本节点追加到元素节点中9.将元素节点追加到城市下拉框中--><!-- 首先我们先写好页面的布局 --><div align="center">城市：<select id="pro"><option value="">请选择</option></select><select id="city"><option value="">请选择</option></select></div>

 <!-- 我们这里使用两种写法，一种是js写法，另一种是jQuery写法 --><script>// 2.定义省份与城市下拉框所需要的数据（数组与二维数组）//省份所需要的数据var proList = ["北京","山西","山东","河北","河南"];//城市下拉框所需要的数据var cityList = [["东城区","西城区","朝阳区","海淀区","昌平区"],["太原市","大同市","临汾市","晋中市"],["济南市","青岛市","运城市","烟台市","临沂市"],["石家庄","邢台市","保定市","海淀区"],["郑州市","南阳市","焦作市","信阳市"]];//  3.填充省份下拉框的数据for(var i=0;i<proList.length;i++){//创建元素节点var opt = document.createElement("option");//创建文本节点var txt = document.createTextNode(proList[i]);//向option元素中追加文本节点opt.appendChild(txt)//设置下拉框对应的value属性opt.value = i;//将option元素追加到省份下拉框中document.getElementById("pro").appendChild(opt);}//绑定省份下拉框的change事件：当下拉框的选项发生改变时执行的事件//  4.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应document.getElementById("pro").onchange = function(){//清空城市下拉框中的数据document.getElementById("city").options.length = 0;//获取下拉框被选中的值var   index = document.getElementById("pro").value;//判断是否选中了指定的省份（index值不为空）if(index == ""){//未选中省份，则设置城市为默认的请选择document.getElementById("city").innerHTML = ' <option value="">请选择</option>';return;}//获取对应城市二维数组中对应的数组var citys = cityList[index];//遍历城市数组for(var i=0;i<citys.length;i++){//创建元素节点var opt = document.createElement("option");//创建文本节点var txt = document.createTextNode(citys[i]);//向option元素中追加文本节点opt.appendChild(txt)//将option元素追加到省份下拉框中document.getElementById("city").appendChild(opt);}}</script>

第二种写法jQuery，提示:使用jQuery写法，要使用jquery.js

  <script>//jquery写法//省份所需要的数据var proList = ["北京","山西","山东","河北","河南"];//城市下拉框所需要的数据var cityList = [["东城区","西城区","朝阳区","海淀区","昌平区"],["太原市","大同市","临汾市","晋中市"],["济南市","青岛市","运城市","烟台市","临沂市"],["石家庄","邢台市","保定市","海淀区"],["郑州市","南阳市","焦作市","信阳市"]];// 加载省份，填充省份下拉框的数据for (var i =0;i<proList.length;i++){//定义下拉选项var opt = $("<option value='"+i+"'>"+proList[i]+"</option>");//将下拉选项追加到省份下拉框中$("#pro").append(opt);}//给省份下拉框绑定change事件$("#pro").change(function(){//得到当前下拉框被选中项的值var  index = $(this).val();//得到被选中的省份对应的城市(二维数组)var citys = cityList[index];//移除城市下拉框中本有的下拉选项(保留第一个选项)$("#city  option:gt(0)").remove();//加载城市下拉框for(var i=0;i < citys.length;i++){var opt = $("<option value='"+i+"'>"+citys[i]+"</option>");//将下拉选项追加到省份下拉框中$("#city").append(opt);}})</script>

这样省市联动就完成了。

省市联动总结

         1.总的来说两种方法都可以实现，但是这两种方法我们都需要学会虽然说jQuery方法实现比较简单一些，但js也尤其重要2. 绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应3.通过选中的值(索引) 获取二维数组中对应的数组4.清空城市下拉框的选中5.遍历城市数组的数据，填充城市下拉框的值6.创建元素节点，创建文本节点，将文本节点追加到元素节点中7.将元素节点追加到城市下拉框中8.我们要了解其中的思路，多敲，多思考。

web前端必学功法之一：省市联动相关推荐

web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
web前端必学功法之一：留言板
web前端必学功法之一:留言板案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
web前端必学功法之一：秒表实现
web前端必学功法之一:秒表实现功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
Web前端好不好学？Web前端要学些什么呢？
你也许会觉得Web前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做We ...
Web前端如何学？Web前端学习方法分享
伴随着人工智能.大数据的发展浪潮,互联网将各个行业更加紧密的链接到了一起,也因此,市场上对于IT互联网人才的需求一再增多,Web前端开发工程师这一岗位就很好的体现了这种态势. 从各大招聘平台可以看到, ...

web前端必学功法之一：省市联动

web前端必学功法之一：省市联动

省市联动总结

web前端必学功法之一：省市联动相关推荐

最新文章

热门文章