js省市县三级联动下拉列表的示例

最新推荐文章于 2024-07-19 15:34:53 发布

Star_Pc_1126

最新推荐文章于 2024-07-19 15:34:53 发布

阅读量3.4k

点赞数

分类专栏：示例代码文章标签：三级联动

本文链接：https://blog.csdn.net/star_pc_1126/article/details/79214651

版权

本文介绍了如何使用JavaScript实现省市县三级联动的下拉列表。通过HTML定义三个下拉框，配合JS函数`selectOnChange`实现在选择上级选项时动态加载下级数据。JS代码通过AJAX从后台获取JSON数据，并创建新的选项。Java后端提供`findAreaByParentId`接口，根据父级ID查询数据库并返回区域列表。

摘要由CSDN通过智能技术生成

html代码三个下拉列表

<select id = "province" onchange ="selectOnChange(this.options[this.options.selectedIndex].value,'city')">
<c:choose>
<c:when test="${not empty areaList}">
<c:forEach items="${areaList}" var="var" varStatus="vs">
<option value="${var.ID}" >
${var.AREANAME}
</option>
</c:forEach>
</c:when>
</c:choose>
</select>
<select id = "city" onchange ="selectOnChange(this.options[this.options.selectedIndex].value,'county')">
</select>
<select id = "county">
</select>

JS代码

function selectOnChange(SelId,toSelId){
//document.getElementById(toSelId).innerHTML="";
$.ajax({
url:"<%=basePath%>