집 > 기사 > 웹 프론트엔드 > JavaScript를 사용하여 3단계 연결을 간단하게 구현

JavaScript를 사용하여 3단계 연결을 간단하게 구현

韦小宝원래의: 2018-03-10 11:55:063837검색

실제 JavaScript 프로젝트 개발에서는 지방 및 시 선택, 상품 3단계 분류 선택 등 3단계 연계가 필요한 경우가 많습니다. 오늘은 JavaScript가 3단계 연결을 구현하는 방법을 설명하고 JavaScript 소스 코드를 여러분과 공유하겠습니다! 3단계 연결 구현을 위한 JavaScript에 익숙하지 않다면 저희와 함께 살펴보세요!

지식 포인트:

1. json.parse()는 json 형식 문자열 을 객체 로 변환합니다. json.stringify()는 객체를 json 형식 문자열로 변환합니다.

2. 중요 속성 selectedIndex: 드롭다운 목록에서 선택한 옵션의 인덱스 번호를 반환합니다.

3. onchange 이벤트

코드는

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select id="province">
        <!-- <option>北京</option>
        <option>天津</option> -->
    </select>
    <select id="city"></select>
    <select id="count"></select>
    <script type="text/javascript" src="china.js"></script>
    <script type="text/javascript">
    var province = document.getElementById("province");
    var city = document.getElementById("city");
    var count = document.getElementById("count");

    var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
    // var chinaArea = eval("("+chinaArea+")");
    // var chinaArea = new Function("return " + chinaArea)();

    //1.遍历省份
    var provinceList = chinaArea.china.province;//数组
    for(var i = 0 ; i < provinceList.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = provinceList[i]["-name"];
        province.appendChild(option);
    }

    province.onchange = function() {
        //选择省份之后，市区跟着变化
        cityData();
        countData();
    }
    cityData();
    //市区的数据填充
    var sIndex = 0;
    var cityIndex = 0;
    function cityData() {
        //清除原来的市区信息
        city.innerHTML = "";
        //2.遍历市区
        sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
        for(var j = 0; j < provinceList[sIndex].city.length;j++) {
            var option = document.createElement("option");
            option.innerHTML = provinceList[sIndex].city[j]["-name"];
            city.appendChild(option);
        }
    }

    //县区数据填充

    function countData() {
        //清除原来的县区信息
        count.innerHTML = "";

        // 
        cityIndex = city.selectedIndex;
        var countList = chinaArea.china.province[sIndex].city[cityIndex].county; 
        for(var k = 0; k < countList.length; k++) {
            var option = document.createElement("option");
            option.innerHTML = countList[k]["-name"];
            count.appendChild(option);
        }
    }

    city.onchange = function() {
        countData();
    }
    countData();
    </script>
</body>
</html>

소스코드와 지식 포인트를 살펴보실 수 있습니다! 직접 작성해보고 지식을 강화해보세요!

관련 권장 사항:

js를 구현하여 도 및 자치단체의 3단계 연계 플러그인 공유

jQuery 3단계 연계 효과 구현 방법

위 내용은 JavaScript를 사용하여 3단계 연결을 간단하게 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：VUE의 계산된 속성 및 리스너 사용 사례다음 기사：VUE의 계산된 속성 및 리스너 사용 사례