ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptによる3階層連携の簡単実装

JavaScriptによる3階層連携の簡単実装

韦小宝
リリース: 2018-03-10 11:55:06
オリジナル
3887 人が閲覧しました

実際の 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>
ログイン後にコピー

ソースコードとナレッジポイントをご覧ください。自分で書いてみて知識を強化してください。

関連推奨事項:

地方自治体の3段階連携プラグイン共有を実現するためのjs

jQueryの3段階連携効果実装方法

以上がJavaScriptによる3階層連携の簡単実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート