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层 中国地区 省 ...
随机推荐
- Sharepoint JSCOM 列表操作
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItemsInclude); //确保js文件加载,再执行方法 function ...
- 得到RequestVO
import java.io.IOException; import java.nio.charset.Charset; import javax.servlet.ServletInputStream ...
- JPA规范基础 ppt教程
https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html
- linux目录权限
linux中,有三种不同类型的用户可以对文件或目录进行访问:文件所有者,同组用户,其他用户.所有者一般是文件的创建者,文件所有者自动拥有对该文件的读.写和可执行权限.所有者能允许同组用户有权访问文件, ...
- Murano Weekly Meeting 2015.07.21
会议时间: 2015.07.21 主持人: Kirill Zaitsev, core from Mirantis 会议摘要: 1.murano client和murano dashboard升级到y ...
- Java Web项目在Mac系统上启动时提示nodename nor servname provided的解决办法
今天在Mac系统上启动Java Web项目的时候,提示了Java.net.UnknownHostException: yangxiaomindeMacBook-Pro.local nodename n ...
- sql server sql语句
添加联合唯一索引 create unique index 索引名 on 表名(列名1,列名2……)
- C#在VS2005开发环境中利用异步模式来对一个方法的执行时间进行超时控制
using System.Threading; using System; namespace ConsoleApplication4 { public class Program { static ...
- 八个cmd 命令
一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的IP ...
- System path '/Users/hxy/Library/Caches/PyCharm2018.2' is invalid.
Mac系统下安装pycharm后启动出现System path '/Users/hxy/Library/Caches/PyCharm2018.2' is invalid.问题: 1.出现原因: 1.1 ...