JavaScript による省・市連携効果の実現

この記事では、省と都市間の連携効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>州と市の連携効果</title>
</head>
<body onload="initProvince()">
州: <select id="province" onchange="fillCity()"></select>
都市: <select id="city"></select>
<スクリプト>
    /**
     * 州関数を初期化する */
    関数 initProvince() {
        // 州を格納する配列を宣言します。let ProvinceArr=["陝西省","四川省","河南省","山東省"];
        // 州の配列をドロップダウン リストに動的に書き込みます // ID で州リスト オブジェクトを取得します let proovinceObj=document.getElementById("province");
        //選択が行われていない場合に表示されるコンテンツを設定します。let option=new Option("---州を選択してください---","");
        proovinceObj.options.add(オプション);
        // 州配列をループする for (let Province of ProvinceArr) {
            //Option オブジェクトを作成 //パラメーター 1: リスト表示内容 //パラメーター 2: Option の値属性値 let option = new Option(province,province);
            // オプション オブジェクトを ProvinceObj オブジェクトに追加します。 proovinceObj.options.add(option);
        }
    }
    //都市配列を作成する //都市を格納するための配列を宣言する let cityArr = new Array();
    cityArr['陝西省']=['西安', '咸陽', '宝鶏', '漢中', '燕'];
    cityArr['四川省']=['成都', '達州', '広元', '綿陽', '楽山'];
    cityArr['河南省']=['鄭州市', '開封市', '洛陽市', '新郷市', '焦作市'];
    cityArr['山東省']=['済南市', '青島市', '莱州市', '煙台市', '徳州市'];

    /**
     * 州別に都市を入力してください*/
    関数fillCity() {
        //現在選択されている州を取得します。let ProvinceObj = document.getElementById("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)
        }
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: