省市区三级联动select下拉框，下拉框数据回显 Demo js脚本实现带脚本与案例,整理好了的下载既可用

最新推荐文章于 2023-05-05 09:31:18 发布

别盗我的图

最新推荐文章于 2023-05-05 09:31:18 发布

阅读量3.7k

点赞数

分类专栏：工作总结文章标签：省市级三级联动 js脚本数据回显

本文链接：https://blog.csdn.net/qq_34657993/article/details/60872450

版权

工作总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市区三级联动(jQuery+Json)</title>
<script type="text/javascript" src="http://img.pccoo.cn/js/jquery.js"></script>
<script type="text/javascript" src="china_area.js"></script>
<script type="text/javascript">

$(function() {

   alert($(cityJson)[2].city)

    $.each(provinceJson, function(k, p) {
        var option = "<option value='" + p.id + "'>" + p.province + "</option>";
        $("#selProvince").append(option);
    });

    $("#selProvince").change(function() {
        var selValue = $(this).val();
        $("#selCity option:gt(0)").remove();
       $("#selDistrict option:gt(0)").remove();
        $.each(cityJson, function(k, p) {
            // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
            if (p.id == selValue || p.parent == selValue) {
                var option = "<option value='" + p.id + "'>" + p.city + "</option>";
                $("#selCity").append(option);
            }
        });
    });

    $("#selCity").change(function() {
        var selValue = $(this).val();
        $("#selDistrict option:gt(0)").remove();
        $.each(countyJson, function(k, p) {
            if (p.parent == selValue) {
                var option = "<option value='" + p.id + "'>" + p.county + "</option>";
                $("#selDistrict").append(option);
            }
        });
    });
});

/*三级联动数据回显----------------------需要回显的页面加上以下即可---------------------------

jsp:       <input type="hidden" value="${info.a_province}" id="t_a_province"/>
           <input type="hidden" value="${info.a_city}" id="t_a_city"/>
           <input type="hidden" value="${info.a_area}" id="t_a_area"/>

javascript:       $("#t_a_province").val();
               $("#t_a_city").val();
               $("#t_a_area").val();
               */
//以上传值-----------------------------------------------------------------------------------
/*************************数据库存储的是键*/
$(function() {
   //1，回显select省份
       $("#selProvince option").each(function() {
       var val = $(this).val();
           if(val == 703){ //---request域对象中的省份参数
               $(this).attr("selected", true);
           }
       });
       //获取省份的val值
       selValue = $("#selProvince option:selected").val();

   //2，加载省份下的城市
       $.each(cityJson, function(k, p) {
           // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
           if (p.id == selValue || p.parent == selValue) {
               var option = "<option value='" + p.id + "'>" + p.city + "</option>";
               $("#selCity").append(option);
           }
       });
       //回显select城市
       $("#selCity option").each(function() {
       var val = $(this).val();
           if(val == 853){ //---request域对象中的城市参数
               $(this).attr("selected", true);
           }
       });
       //获取城市的val值
       selValue = $("#selCity option:selected").val();
   //3，加载城市下的地区
       $.each(countyJson, function(k, p) {
           if (p.parent == selValue) {
               var option = "<option value='" + p.id + "'>" + p.county + "</option>";
               $("#selDistrict").append(option);
           }
       });
       //回显select地区
       $("#selDistrict option").each(function() {
       var val = $(this).val();
           if(val == 856){ //---request域对象中的地区参数
               $(this).attr("selected", true);
           }
       });

   });

/***************************数据库存储的是字符：键
//---------数据回显----------
   $(function() {
   //1，回显select省份
       $("#selProvince option").each(function() {
       var val = $(this).text();
           if(val == $("#t_a_province").val()){ //---request域对象中的省份参数
               $(this).attr("selected", true);
           }
       });
       //获取省份的val值
       selValue = $("#selProvince option:selected").val();

   //2，加载省份下的城市
       $.each(cityJson, function(k, p) {
           // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
           if (p.id == selValue || p.parent == selValue) {
               var option = "<option value='" + p.id + "'>" + p.city + "</option>";
               $("#selCity").append(option);
           }
       });
       //回显select城市
       $("#selCity option").each(function() {
       var val = $(this).text();
           if(val == $("#t_a_city").val()){ //---request域对象中的城市参数
               $(this).attr("selected", true);
           }
       });
       //获取城市的val值
       selValue = $("#selCity option:selected").val();
   //3，加载城市下的地区
       $.each(countyJson, function(k, p) {
           if (p.parent == selValue) {
               var option = "<option value='" + p.id + "'>" + p.county + "</option>";
               $("#selDistrict").append(option);
           }
       });
       //回显select地区
       $("#selDistrict option").each(function() {
       var val = $(this).text();
           if(val == $("#t_a_area").val()){ //---request域对象中的地区参数
               $(this).attr("selected", true);
           }
       });

   });

*/


</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
</body>
</html>