正文

三级联动

我爱吃小炒肉  我爱吃小炒肉  2022-08-31  455

关键词：

做三级联动之前先封装一个三级联动，就可以在任何页面进行引用了。

先写个页面引用js

1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2 <title>三级联动</title>
3 <script src="jquery-3.2.0.js"></script>
4 <script src="sanjiliandong_fengzhaung.js"></script>
5 </head>

1.先建个显示列表的div

1 <body>
2 <h1>查询</h1>
3 
4 <div id="sanji"></div>
5 
6 </body>

2.在div里显示下拉列表

1 var str="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";//这里我们要它显示省份城市区县的下拉
2 $("#sanji").html(str);//然后再把它放到div里

3.在执行时是依次显示省、市、区，并且改变省份相应的市和区也要变成相应的地方

 1 $(document).ready(function(e) {
 2     var str="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
 3     $("#sanji").html(str);
 4     //加载省的方法
 5     sheng();
 6     //加载市的方法
 7     shi();
 8     //加载区的方法
 9     qu();
10     
11     $("#sheng").change(function(){  
12             //改变省，下面的市和区重新显示
13 　　         shi();
14 　           qu();
15           })
16 
17 
18 //$("#shi").click(function(){
19     $("#shi").change(function(){  
20             //改变市，下面区重新显示
21 　　        qu();
22         })
23 });

4.再就是怎么省，市，县给加载出来

不难看出规律，地区的代号和父级代号能看出，通过11---父级的11，也就是通过省能找到相应的市；然后通过1101---父级的1101，也就是通过市能找到相应的区

省中只有一个中国中的省，那么直接定义一个代号是“0001”，然后通过AJAX进行遍历数据库找出属于中国的省

 1 //加载省份的方法
 2 function sheng(){
 3         //找到省的父级代号
 4         var pcode = "0001";
 5         $.ajax({
 6             async:false,//这里要同步
 7             url:"sjcl.php",
 8             data:{pcode:pcode}, 
 9     　　        type:"POST", 
10             dataType:"TEXT",
11             success: function(data){
12                 var hang=data.split("|");//将数组给拆分
13                 var str="";
14                 for(var i=0;i<hang.length;i++)
15                 {
16                     var lie=hang[i].split("^");
17                     str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";//拼接成字符串
18                 }
19                 $("#sheng").html(str);
20             }
21             })
22     }

加载市这个和加载省是一样的就是传的值是不同的这个要根据父级去找子级

1 var pcode = $("#sheng").val();//找到市的父级代号

这个用ajax遍历完后写到市的下拉里

同理加载区就是获取市的值

1 var pcode = $("#shi").val();//找到区的父级代号

这个用ajax遍历完后写到区的下拉里

5.处理页面

1 <?php
2 require "DBDA.class.php";
3 $db=new DBDA();
4 $pcode=$_POST["pcode"];
5 
6 
7 $sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";
8 echo $db->StrQuery($sql);

效果：

三级联动

今天做了个三级联动,不是select下拉菜单的,话不读书,直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>三级联动原声js实现</title><scriptsrc=‘jquery-3.2.1.min.js‘></scrip 查看详情

三级联动

以下为phpcms中的三级联动程序实现:HTML代码：12<div>3<form>4<label>请选择收货地址:</label>5<divid="p-c">6<selectname="province"id="province">请选择省份</select>7<select 查看详情

angularjsselect三级联动

<!DOCTYPEHTML><html><head><metacharset="UTF-8"><title>angularjsselect三级联动</title><scripttype="text/javascript"src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.1 查看详情

下拉菜单的三级联动

查看详情

js三级联动

原生js实现省市区三级联动html部分代码<selectname=""id="p"> 　　<optionvalue="0">请选择省</option> </select> <selectname=""id="c"> 　　<optionvalue="0">请选择市</option> </selec 查看详情

js三级联动

实例：省市区的三级联动<body><section><a>省份</a><selectid="province"><optionvalue="0">--请选择--</option><optionvalue="1">山东</option>//通过value来区分市的二维数组<optionv 查看详情

ajax实现三级联动下拉菜单

...着急去实现功能，我们第一步首先要理清思路，想要实现三级联动，首先要有三个下拉框，然后点击第一个下拉菜单，可以联动到第二个，点击第二个联动到第三个，实现省市区的三级联动，用到的数据表如下：为了以后可以随... 查看详情

三级联动

publicActionResultsanji()varlist=bl.sanji(0);varlinq=fromiinlistselectnewSelectListItemText=i.name,Value=i.id.ToString();ViewBag.vb=linq;returnView();//ajax方法publicstringajax(intaid)varlist=bl.sa 查看详情

省市区三级联动

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>省市区三级联动</title><scriptsrc="/js/template.js"></script></head><body><h1>省市区三级联动< 查看详情

js三级联动

$scope.province=[{"proID":1,"proName":"河北省"},{"proID":2,"proName":"湖南省"},{"proID":3,"proName":"河南省"}];$scope.city=[{"cityID":1,"cityName":"石家庄","proID":1},{"cityID":2,"cityName":"长沙市","proID":2},{"cit 查看详情

类似于省市区的三级联动

三级联动，前一个的值会确定下一个下拉列表的内容（以地区为例，地区不全）查看详情

多级联动系列——ajax调用xml实现三级联动

...浏览器兼容问题了。用ajax调用XML页面中的内容，来生成三级联动，OK废话不多说，跟着我一步步写吧。首先写一个XML文件。data.xml<?xmlversion="1.0"encoding="UTF-8"?><list> <provincename="河南"id=‘1‘> <cityname="焦作"id=‘11 查看详情

地区三级联动--省份province

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>地区三级联动</title><scriptsrc="./jquery.js"></script></head><body><h2>地区三级联动查看详情

vue中的三级联动

...内容2、js里面的内容3、函数怎么写？这是一个省市区的三级联动，首先你要传递中国的id，这样才能获取到所有的省份，所以在vue的项目中，我需要发一次进页面就请求（来得到所有省份的数据）4、现在一级的数据已经获取到... 查看详情

三级联动练习

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>三级联动</title></head><body>省：<selectstyle="width:100px;"id="pre"onchange="chg(this);"><opti 查看详情

html实现省——市——区三级联动

　　html实现省——市——区三级联动　　html中实现三级联动是一个不错的demo，博主在这里跟大家分享一下实现的过程，以及自己在过程中出现的一些问题，仅供参考。　　首先我们将全国的省市区数据导入进来，这里已经... 查看详情

winform三级联动

窗体中方三个comboboxForm1中的代码AreaDataBind函数 newchinaData().Select()函数找到combobox属性里面的事件selectedindexchanged事件运行如下查看详情

原生javascript的省市县三级联动

三级联动是我们写表单时必不可少的，比如在写收货地址时，就用到他了，最近在看原生JavaScript，从基础写起，待完善，以后再写个jquery版的、 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>三级联... 查看详情