利用js数组生成省市二级联动

最新推荐文章于 2022-06-30 17:29:41 发布

tt39635552

最新推荐文章于 2022-06-30 17:29:41 发布

阅读量2.2k

点赞数

分类专栏： Js 文章标签： string 数据库 c

本文链接：https://blog.youkuaiyun.com/tt39635552/article/details/2900807

版权

Js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript从后台数据库获取数据，并构建省市二级联动的效果。通过创建数组并动态生成下拉选项，实现了根据一级联动省份选择后，二级联动城市自动更新的功能。涉及到的关键技术包括JavaScript数组操作、DOM元素动态创建以及与数据库的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 <script>
var temp;
function test(){
//初始化一级联动 
//***************自定义******************// 
temp = [
['湖北','武汉','黄石','孝感'],
['北京','海淀','朝阳']
];
//*************从后台取*******************// 
temp = new Array(count); 
 for(var a=0;a<count;a++){
 temp[a] = new Array(); 
     }
 <%
 String[][] ta =  new dao().getAllValue();
 for(int b =0;b<ta.length;b++){
 for(int c =0;c<ta[b].length;c++){
 %>
 temp[<%=b%>][<%=c%>] = '<%=ta[b][c]%>'; 
 <%
 }
 }
 %>
//****************************************** 
for (var i = 0; i < temp.length; i++){
 var newElem = document.createElement("option");
 newElem.text=temp[i][0];
 newElem.value=temp[i][0];
 document.getElementById("ctrlList").options.add(newElem);
}
choose(0);
}
//选择后联动 
function choose(num){
 deleteRecord();
 for (var j = 1; j < temp[num].length; j++){
 var newElem = document.createElement("option");
 newElem.text=temp[num][j];
 newElem.value=temp[num][j];
 document.getElementById("cityList").options.add(newElem);
}
}
//删除上节点 
function deleteRecord(){
 var obj = document.getElementById("cityList");
 var count = obj.length;
 for(var k=(count-1);k>=0;k--){
 obj.options.remove(k); 
 }
 }
</script>
</head>
<body οnlοad="test()">
  <select size="1" name="ctrlList" οnchange="choose(this.selectedIndex)">
  </select>
  <select size="1" name="cityList">
  </select>
</body>
//==============================后台读取数据库组织数组==================================// 
package tt;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class dao {
 private static Connection con;
 private static Statement sta;
 private static ResultSet rs;
 private static String[][] temp;
 public int getProvince() throws SQLException{
  List list = new ArrayList();
  con = context.getCon();
  sta  = con.createStatement();
  rs = sta.executeQuery("select province from zip group by province");  
  while(rs.next()){
   list.add(rs.getString(1));
  }
  closeData();
  temp = new String[list.size()][];
  for(int i=0;i<list.size();i++){
   temp[i] = new String[]{(String)list.get(i)};
  }
  return temp.length;  
 }
 public String[][] getAllValue() throws SQLException{  
  int count = getProvince();
  for(int i=0;i<count;i++){
   List list = new ArrayList();
   con = context.getCon();
   sta  = con.createStatement();
   rs = sta.executeQuery("select city from zip where province='"+temp[i][0]+"'");
   while(rs.next()){    
    list.add(rs.getString(1));
   }
   String[] a = new String[list.size()+1];
   for(int j=1;j<=list.size();j++){
    a[0] = temp[i][0];
    a[j] = (String)list.get(j-1);
   }
   temp[i] = a;
  }
  closeData();
  return temp;    
 }
 public static void closeData() throws SQLException{
  rs.close();
  sta.close();
  con.close();
 }
 public static void main(String[] args) throws SQLException {
  String[][] te = new dao().getAllValue();
  for(int i=0;i<te.length;i++){
   
   for(int j=0;j<te[i].length;j++){
    System.out.print(te[i][j]);
   }
   System.out.println("/n");
  }
  
  
  
 }
}
 