js原生实现三级联动下拉菜单
js代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<style>
select{ width:150px; height:35px;}
</style>
</head> <body>
<select class="sheng">
<option>请选择</option>
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span> <script>
//获取到三个选择列表
var shengSelect =document.querySelector(".sheng");
var shiSelect =document.querySelector(".shi");
var quSelect =document.querySelector(".qu"); var shenglist=['广西壮族自治区','广东','湖北'];
var shilist=[['南宁','桂林','柳州'],['广州','深圳','东莞'],['武汉','荆门','襄阳']];
var qulist=[
[['南1区','南2区','南3区'],['桂1区','桂2区','桂3区'],['柳1区','柳2区','柳3区']],
[['广1区','广2区','广3区'],['深1区','深2区','深3区'],['东1区','东2区']],
[['武1区','武2区','武3区'],['荆1区','荆2区','荆3区'],['襄1区','襄2区','襄3区']]
];
//选择省的下标
var shengIndex =0;
//加载省
for(var i=0;i<shenglist.length;i++){
var shengOption = new Option(shenglist[i]);
shengSelect.options.add(shengOption);
}
//选择省后加载市
shengSelect.onchange =function(eve){
shengIndex =eve.target.selectedIndex-1;
if(shengIndex == -1){
shiSelect.options.length= 0;
quSelect.options.length=0;
}else{
shiSelect.options.length= 0;
quSelect.options.length=0;
for(var j=0;j<shilist.length;j++){
var shiOption =new Option(shilist[shengIndex][j]);
shiSelect.options.add(shiOption);
}
//加载市的同时，加载第一个市的全部区
for(var k=0;k<qulist[shengIndex][0].length;k++){
var quOption =new Option(qulist[shengIndex][0][k]);
quSelect.options.add(quOption);
}
}
}
//选择市后加载区
shiSelect.onchange=function(eve){
var shiIndex =eve.target.selectedIndex;
quSelect.options.length =0;
for(var n =0;n<qulist[shengIndex][shiIndex].length;n++){
var quOption =new Option(qulist[shengIndex][shiIndex][n]);
quSelect.options.add(quOption);
}
}
</script>
</body>
</html>
js写出来基本样子就这样了，下面我们从后台进行获取数据将他显示在页面里面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<style>
select{ width:150px; height:35px;}
</style>
</head>
<body>
<select class="sheng">
<option>请选择</option>
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span>
<script>
//获取到三个选择列表
var shengSelect =document.querySelector(".sheng");
var shiSelect =document.querySelector(".shi");
var quSelect =document.querySelector(".qu");
//var shenglist=['广西壮族自治区','广东','湖北']; //页面加载完成发送ajax请求，获取省数据
var shengIndex =0;
(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
shenglist = JSON.parse(xhr.responseText);
//加载省
for(var i=0;i<shenglist.length;i++){
var shengOption = new Option(shenglist[i]);
shengSelect.options.add(shengOption);
}
}
}
}
xhr.open('get','selectDemo.php?type=0',true);
xhr.send();
}()); //点击省加载市
shengSelect.onchange =function(eve){
shengIndex =eve.target.selectedIndex-1;
if(shengIndex== -1){
shiSelect.options.length = 0;
quSelect.options.length = 0;
}else{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
//console.log(JSON.parse(xhr.responseText));
var success = JSON.parse(xhr.responseText);
var shilist =success[0];
shiSelect.options.length = 0;
for(var j=0;j<shilist.length;j++){
var shiOption = new Option(shilist[j]);
shiSelect.options.add(shiOption);
}
//加载市的同时加载第一个区
var qulist = success[1];
quSelect.options.length =0;
for(var n=0;n<qulist.length;n++){
var quOption = new Option(qulist[n]);
quSelect.options.add(quOption);
}
}
}
}
xhr.open('get','selectDemo.php?type=1&sheng='+shengIndex,true);
xhr.send();
}
} //点击市加载区
shiSelect.onchange =function(eve){
shiIndex =eve.target.selectedIndex;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
//console.log(JSON.parse(xhr.responseText));
var qulist = JSON.parse(xhr.responseText);
//shiSelect.options.length = 0;
quSelect.options.length =0;
for(var n=0;n<qulist.length;n++){
var quOption = new Option(qulist[n]);
quSelect.options.add(quOption);
}
}
}
}
xhr.open('get','selectDemo.php?type=2&sheng='+shengIndex+'&shi='+shiIndex,true);
xhr.send();
}
</script>
</body>
</html>
下面是一个简单的后台，方便测试
<?php
$shengList = ['广西壮族自治区','广东','湖北'];
$shilist=[['南宁','桂林','柳州'],['广州','深圳','东莞'],['武汉','荆门','襄阳']];
$qulist=[[['南1区','南2区','南3区'],['桂1区','桂2区','桂3区'],['柳1区','柳2区','柳3区']],
[['广1区','广2区','广3区'],['深1区','深2区','深3区'],['东1区','东2区']],
[['武1区','武2区','武3区'],['荆1区','荆2区','荆3区'],['襄1区','襄2区','襄3区']]]; $type=$_GET['type'];
if($type==0){
echo json_encode($shengList);
}elseif($type==1){
$shengInedx=$_GET['sheng'];
$success = [$shilist[$shengInedx],$qulist[$shengInedx][0]];
echo json_encode($success);
}else if($type==2){
$shengInedx=$_GET['sheng'];
$shinInedx=$_GET['shi'];
echo json_encode($qulist[$shengInedx][$shinInedx]);
}
?>
效果图：
不过呢，数据这东西还是放在数据库是比较好的，需要的时候直接从后台调用出来，然后发给前端进行显示就好啦，也方便我们进行修改与操作
js原生实现三级联动下拉菜单的更多相关文章
- php+ajax的三级联动下拉菜单
封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- ajax 实现三级联动下拉菜单
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- PHP用ajia代码写三级联动下拉
下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
随机推荐
- luogu P5142 区间方差 十分优美的线段树
又来了个维护方差的线段树.... 大致推导过程(字丑多包涵QAQ) 注意取模时要加一些100000007防止出现负数.. #include<cstdio> #include<iost ...
- 高并发web系统优化总结
1.背景 因为业务需要,搭建了一个系统,系统主要由两部分组成,web页面和数据库. mysql大概2万条数据,其中有一个字段是click_num点击次数,php页面会取点击次数最小的一条记录去进行操作 ...
- An internal error occurred during: "Add Deployment". Container with path org.eclipse.jdt.launching.
导入非本机项目出现这种错误,原因就是JDK版本不一致. 具体解决步骤如下: 右键项目名→Properties→JavaBuild Path→Libraries→选中JRE SystemLibrary[ ...
- 02------css选择器
css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某 ...
- QT LCDNumber使用
新建一个QT工程 然后在cpp文件中写入代码 #include "hello.h" #include <qthread.h> #include <QVariant ...
- 强连通图 Tarjan算法
算法学习:https://blog.csdn.net/qq_16234613/article/details/77431043 http://www.cnblogs.com/chenchengxun/ ...
- phpcms Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE错误
我在phpcms的模板中自定义了一个变量,变量的值是通过pc标签赋予的. <?php $url="{$v[url]}"; ?> 结果报如上错误. 实际上应把PHP语句改 ...
- OracleJDK与OpenJDK的区别和联系
OpenJDK原是SunMicrosystems公司为Java平台构建的Java开发环境(JDK)的开源版本,完全自由,开放源码.OracleJDK里面包含的JVM是HotSpotVM,HotSpot ...
- C#中接口的深入浅出【转】
C#中接口的深入浅出 假设我们公司有两种程序员:VB程序员,指的是用VB写程序的程序员,用clsVBProgramer这个类表示:Delphi程序员指的是用Delphi写程序的程序员,用clsDelp ...
- JMeter测试TCP服务器遇到的一个奇怪问题
今天工作需要测TCP服务器的压力,因为tsung测试TCP需要写的脚本实在头大,于是换了JMETER来搞压力测试.在实际测试的过程中,遇到了一个很奇怪的问题,就是发了数据包以后,JMeter不停地报5 ...