JS三级联动代码格式实例详解
这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
实现js多级联动的代码格式
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
省份<select id="pro" onchange="getcity()"> <!--创造三个下拉选项栏-->
<option>选择省份</option>
</select>
城市<select id="city" onchange="getarea()">
<option>选择城市</option>
</select>
区<select id="area">
<option>选择区</option>
</select>
</body>
</html>
<script type="text/javascript">
var sheng = ["湖北省", "湖南省", "广东省"];
var city = [["武汉市", "宜昌市", "咸宁市"], ["长沙市", "常德市", "邵阳市"], ["广州市", "深圳市", "惠州市"]]
var ar = [[["武昌区", "洪山区"], ["夷陵区"], ["咸安区"]], [["芙蓉区"], ["鼎城区"], ["双清区"]], [["荔湾区"], ["福田区"], ["惠阳区"]]]
window.onload = start;
var s = document.getElementById("pro"); //设置初始的省份选项
function start() {
for (var i = 0; i < sheng.length; i++) {
var op = document.createElement("option");
op.innerHTML = sheng[i];
s.appendChild(op); //添加几个可选择的省份到第一个选项下拉栏
}
}
var c = document.getElementById("city")
function getcity() {
c.length = 1;
var sw = s.selectedIndex;//找到省份位置，从而好使后面的城市与省份对应
var citys = city[sw - 1];
for (var j = 0; j < citys.length; j++) {
var op1 = document.createElement("option");
op1.innerHTML = citys[j];
c.appendChild(op1);
}
}
var a = document.getElementById("area")
function getarea() {
a.length = 1;
var sw = s.selectedIndex;//省份位置，与上一步中的sw一样
var cw = c.selectedIndex;//城市位置
var citys = ar[sw - 1];//先把三维数组中的区域找出来，确定是哪个省里的几个区
var ars = citys[cw - 1];//再w位置，把对应的区对应给相应的城市
for (var k = 0; k < ars.length; k++) {
var op2 = document.createElement("option");
op2.innerHTML = ars[k];
a.appendChild(op2);
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl
-
原生javascript AJAX 三级联动的实现代码
js 三级联动的实现代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生ajax</title> </head> <body> <select name="sel1"> <option value=""
-
原生js三级联动的简单实现代码
实例如下: <!DOCTYPE html> <head> <title> 三级联动 </title> <meta charset="utf-8"> </head> <body> <script> window.onload = function() { console.log(city) var oDiv = document.getElementById("div");
-
JavaScript实现三级联动菜单实例代码
本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧. 用javascript制作的一个简单三级联动,非常简单实用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="
-
原生js实现省市区三级联动代码分享
前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 准备 <div id="wrap"></div> 页面中的容器标签不限制,只需给个id就行 var address = new Address({ wrapId: 'wrap', showArr: ['provinces','citys','areas'], beforeCreat:function(){ console.
-
JS封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关
-
vue.js模仿京东省市区三级联动的选择组件实例代码
前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section cl
-
js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">
-
JS三级联动代码格式实例详解
这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h
-
JS JSOP跨域请求实例详解
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu
-
Android中webview与JS交互、互调方法实例详解
Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这
-
Vue.js框架路由使用方法实例详解
Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
-
Vue.js进行查询操作的实例详解
Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>
-
原生js中ajax访问的实例详解
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
-
jQuery.datatables.js插件用法及api实例详解
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "
-
JS前端实现fsm有限状态机实例详解
目录 引言 举个栗子 从零开始 获取状态 状态改变 transition 实现fsm状态机 实现钩子函数 完整代码 总结 引言 我们平时开发时本质上就时对应用程序的各种状态进行切换并作出相应处理,最直接的方法就是添加标志位然后考虑所有可能出现的边界问题,通过if...else if...else 来对当前状态进行判断从而达成页面的交互效果, 但随着业务需求的增加各种状态也会随之增多,我们就不得不再次修改if...else代码或者增加对应的判断,最终使得程序的可读性.扩展性.维护性变得很麻烦 有限
-
微信小程序引用公共js里的方法的实例详解
微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
-
js对象的读取速度实例详解
1.访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢.访问对象成员时,就像作用域链一样,在原型链上搜索. 2.如果找到的成员在原型链中的位置太深,访问速度就会变慢. 所以要尽量减少对象成员的搜索次数和嵌套深度. 实例 // 进行两次对象成员查找 function hasEitherClass(element, className1, className2) { return element.className === className1 || element.className ==