자 바스 크 립 트 기반 성 시 연동 효과 실현

본 고의 실례 는 여러분 께 자 바스 크 립 트 가 성시 연동 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하 였 으 며,여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>       </title>
</head>
<body onload="initProvince()">
  ：<select id="province" onchange="fillCity()"></select>
  ：<select  id="city"></select>
<script>
    /**
     *        
     */
    function initProvince() {
        //         
        let provinceArr=["   ","   ","   ","   "];
        //               
        //  id        
        let proovinceObj=document.getElementById("province");
        //      ，     
        let option=new Option("---     ---","");
        proovinceObj.options.add(option);
        //        
        for (let province of provinceArr){
            //  Option  
            //   ：       
            //   ：option values   
            let option = new Option(province,province);
            // option     provinceObj   
            proovinceObj.options.add(option);
        }
    }
    //      
    //             
    let cityArr=new Array();
    cityArr['   ']=['   ','   ','   ','   ','   '];
    cityArr['   ']=['   ','   ','   ','   ','   '];
    cityArr['   ']=['   ','   ','   ','   ','   '];
    cityArr['   ']=['   ','   ','   ','   ','   '];

    /**
     *         
     */
    function fillCity() {
        //         
        let provinceObj = document.getElementById("province");
        let province=provinceObj.value;
        //        
        let cityObj = document.getElementById("city");
        //            
        cityObj.options.length=0;
        //         
        if (province!=""){
            let cityOption = new Option("---     ---","");
            cityObj.options.add(cityOption);
        }
        //              ，      
        for (let city of cityArr[province]){
            //             
            let cityOption = new Option(city,city);
            cityObj.options.add(cityOption)
        }
    }
</script>
</body>
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.