Java Jsp 下拉框联动 AJAX jquery

最新推荐文章于 2021-08-05 14:33:09 发布

原创最新推荐文章于 2021-08-05 14:33:09 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jsp #AJAX #下拉框 #联动 #jquery

其他备忘专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用Java和JavaScript实现的动态加载省市区选择器的方法。通过下拉列表展示省份，并在用户选择省份后，异步获取并显示对应的城市选项。此方案利用了JSP技术和jQuery库来实现跨页面的数据交互。

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

< contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" import="java.util.*" import="java.io.*" import ="include.my_db.*,java.text.*"%>
<%my_db my_conn=new my_db();%>
<html><body>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#province').change(function(){
  $.get('get_cities.jsp',{province_id: $('#province').val(), random:Math.random()},function(data){
   $('#cities').html(data);
  });
  $('#province').doChange();
});
});
</script>
<select id="province" name="province">
<option value="" selected="true">请选择省份</option>
<%
String sql_query_provinces = "select * from table_provinces";
ResultSet rs_provinces = my_conn.executeQuery(sql_query_provinces);
while(rs_provinces.next()){
%>
<option value="<%=rs_customers.getString("province_id")%>"><%=rs_customers.getString("province_name")%></option>
<%
}
rs_provinces.close();
my_conn.close();%>
</select><br><br>
<select id="cities" name="cities">
<option value="" selected="true">请选择城市</option>
</select>
</body></html>

< contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" import="java.util.*" import="java.io.*" import ="include.my_db.*,java.text.*"%>
<%my_db my_conn=new my_db();%>
<%
String province_id = request.getParameter("province_id");
String cities = "<option value='' selected='true'>请选择城市</option >";
try{
String query = "select * from table_cities where province_id = '"+province_id+"'";
ResultSet rs_cities = my_conn.executeQuery(query);
while(rs_cities.next()){
cities = cities + "<option value='"+rs_cities.getString("city_id")+"'>"+rsOrders.getString("city_name")+"</option>";
}
rs_cities.close();
my_conn.close();
}catch(Exception ex){ex.printStackTrace();}
out.print(cities);
%>