省市区三级联动

Original 2018-12-16 16:27:32 249
abstract:<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>省市区三级联动</title>    </head><body>省:<selec

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>省市区三级联动</title>

    

</head>

<body>

省:<select name="" id="pro"> </select>

市:<select name="" id="city"></select>

区县:<select name="" id="area"></select>

<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script>

$(function() {

    $.getJSON("1.json",function (data) {

        let option='<option value="">选择(省)</option>';

          $.each(data, function(i){

        option += '<option value="' + data[i].proId + '">'+ data[i].proName + '</option>';

        })

        $('#pro').html(option);

    })

})

$('#pro').change(function(){

    console.log($(this).find('.selected').text());

    $.getJSON("2.json",function (data) {

        let option='<option value="">选择(市)</option>';

          $.each(data, function(i){

        if(data[i].proId==$('#pro').val()){

        option += '<option value="' + data[i].cityId + '">'+ data[i].cityName + '</option>';

        }

        })

        $('#pro').html(option);

    })

})


$('#city').change(function(){

    console.log($(this).find('.selected').text());

    $.getJSON("3.json",function (data) {

        let option='<option value="">选择(区县:)</option>';

          $.each(data, function(i){

        if(data[i].cityId==$('#city').val()){

        option += '<option value="' + data[i].areaId + '">'+ data[i].areaName + '</option>';

        }

        })

        $('#area').html(option);

    })

})


</script>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2018-12-16 16:32:36
Teacher's summary:作业完成的不错,最好能付上运行结果的截图。

Release Notes

Popular Entries