怎么实现省市级联，如何用js实现省市区之间的三级联动

来源：整理时间：2023-09-25 06:31:54 编辑：航空兔素材手机版

本文目录一览

1，如何用js实现省市区之间的三级联动
2，怎么用JAVA实现省市级联
3，请问用什么方式可以实现省市级联的效果呀省市的数据是从数据库中查
4，怎么样通过javascript实现省市级联功能

1，如何用js实现省市区之间的三级联动

jquery有个现成的插件，拿过来用就好，自己写太麻烦网页链接

页面中获取值并判断的js如下：

如何用js实现省市区之间的三级联动

2，怎么用JAVA实现省市级联

如果要动态在后台取数据的话,取省和取市的方法你肯定会写的了,关键也就是选取省的时候在js的onchange中调后台的取市的方法

首先得把省的数据读出来，放在省的下拉列表里面，然后调用JavaScript的onchange方法，创建级联列表。注意的是Javascript接收Java传递过来的数据只能是字符串形式。

很简单啊，可以用list和map解决，省用list存，相应的市用list存储，并且放到map里面，key用省，依次……

怎么用JAVA实现省市级联

3，请问用什么方式可以实现省市级联的效果呀省市的数据是从数据库中查

做过省市县三级联动的，就是并排三个下拉列表，选择省级，则市县2级数据清空并重新加载数据，选择市级，则县级数据清空并重新加载数据，最后的县级则是实际要保存的数据。数据使用的是国家标准行政区划代码，保存为一个数据库表中，我的数据涵盖全国所有行政区划（到区县一级），大约3000多条，如下所示：110000 北京市110100 市辖区110101 东城区220000 吉林省220100 长春市220101 市辖区220102 南关区格式为[aabbcc]，其中bbcc都为0则为省级aa下的各市，cc为0则为市级aabb下的区县。使用jquery的ajax方式从服务器加载json数据，每次加载把省市县三级的数据都加载进来。当选择了省级，ajax传送编码aa0000，返回数据中的省级数据始终列出各省数据；市级数据列出aabb00；县级为空是因为还没有选择市级；当选择了市级，ajax传送编码aabb00，返回数据中的省级数据始终列出各省数据；市级数据列出aabb00；县级列出aabbcc；当选择了县级，就不用传送ajax了，那就是我们想要的数据。这思路是本人项目中实际使用的，效果很好，每次ajax从服务器读取的数据量很小因此响应很快。另外的思路是一次性把行政区划数据都传送到客户端，在客户端通过jquery解析处理，这也是我曾经考虑过的方法，处理要简单的多，纯数据要50k多，以数组格式大约需要60k的数据量，json格式估计100k以内，局域网肯定没有问题，以目前的网速也可以用在互联网上，但多少还是要影响性能的。

使用jquery的ajax方式从服务器加载json数据至客户端即可以实现省市级联的效果。　　具体如下：　　1）、页面初始化时，首先加载所有的省；　　2）、选择省，ajax传送编码至服务器，服务器根据选中的省编码，返回省下所有的市。　　这样就能动态实现了省市级联的效果了。

请问用什么方式可以实现省市级联的效果呀省市的数据是从数据库中查

4，怎么样通过javascript实现省市级联功能

代码如下：自己写过的，你把数字换为省市即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 省市联动 <select id="select1" onchange="show(this);"> </select> <select id="select2"> </select> </body> <script type="text/javascript"> //一个方法可以重复的使用； function showValue(doc,arrr,start){ for(var i=start; i<arrr.length; i++){ doc.innerHTML+="<option>"+arrr[i]+"</option>"; } } var sel2=document.getElementById("select2"); var sel1=document.getElementById("select1"); //二维数组： var arr = [ [1,1.1,1.2,1.3], [2,2.1,2.2,2.3], [3,3.1,3.2,3.3] ]; //初始化左边的select的内容 for(var i=0;i<arr.length; i++){ sel1.innerHTML+="<option>"+arr[i][0]+"</option>"; } //初始化右边的内容 // for(var i=1;i<arr[0].length; i++){ // sel2.innerHTML+=("<option>"+arr[0][i]+"</option>"); // } //初始化右边 showValue(sel2,arr[0],1); // var os=sel1.getElementsByTagName("option"); function show(thiss) { // alert(thiss.value); //获取指定标签位置的value的值 for(var i=0; i<arr.length; i++){ if(arr[i][0]==thiss.value){ // 添加之前先将右边的清空 sel2.innerHTML=""; // 找过指定国家的下标 //也就是指定一维数组的第一个元素。 // for(var j=1; i<arr[i].length; j++){ // sel2.innerHTML+=("<option>"+arr[i][j]+"</option>"); // } // for(var j=1; i<arr[i].length; j++){ // var opt2=document.createElement("option"); // var tex2=document.createTextNode(arr[i][j]); // } showValue(sel2,arr[i],1); } } //var j=t.value; //添加之前先清除右边的内容 // sel2.options.length=0; } </script> </html>

给select控件添加onchange方法。