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

时间：2022-11-21 17:56:14
<!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>

标签：

相关文章