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文はインデックスを使用しません

推薦する

Linux サーバー上の hosts ファイル構成の詳細な説明

Linux サーバーのホスト ファイルの構成hosts ファイルは、Linux システム内の IP ...

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

Element-uiはテーブル内のセルを直接クリックして編集します

目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

Centos7 で Java8 と MySQL をインストールしてデプロイする

通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...

jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します

この記事では、ウォーターフォールフローが底に達したときにデータを動的にロードするためのjsの具体的な...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

WeChatミニプログラムにナビゲーション機能を実装する方法

1. レンダリング2. 操作手順1. テンセントマップキーを申請する - 住所2. ミニプログラムの...

Mysqlはストアドプロシージャを通じて文字列を配列に分割します

文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...

見落としがちなVue.jsのAPIを詳しく解説

目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...

Vue のスロットスコープの詳細な理解(初心者向け)

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

Windows ベースの MySQL 8.0.12 のインストール

このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...