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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptで州と都市の連携効果を実現
  • 省と市の連携バグ解決を実現するJavaScript
  • JS をベースとしたコード共有で省市連携効果を実現
  • js 州と市の連携効果の完全なサンプルコード
  • JSON+HTMLは国、州、都市のリンク選択効果を実現します
  • JavaScript 2次元配列で実装された州市連携メニュー
  • JavaScript 州と市町村の連携実装コード
  • 州と都市間の連携効果を実現するために js を使用する簡単な例
  • 州と市の連携の最新バージョンの javascript 2009
  • 州と市町村の連携を簡単に実現するJavaScript

<<:  ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

>>:  MySQLのSQL文はインデックスを使用しません

推薦する

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

Vueは複数の画像の追加、表示、削除を実装します

この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...

JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

MySQL ビューの原則分析

目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

elasticsearchを使用してインデックスデータを定期的に削除する

1. ESを使うこともあるリソースが限られている、またはビジネス上のニーズにより、最新の期間のデータ...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...

フレックスレイアウトとposition:absolute/fixedの競合の詳細な説明

以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/...

docker windows10共有ディレクトリのマウント失敗の解決策

原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

スライダーを作成するためのネイティブ js ドラッグ アンド ドロップ機能のサンプル コード

ドラッグ アンド ドロップはフロントエンドでよく使われる機能であり、多くのエフェクトで js のドラ...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...