この記事では、省と都市間の連携効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要
Linux サーバーのホスト ファイルの構成hosts ファイルは、Linux システム内の IP ...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...
目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...
この記事では、ウォーターフォールフローが底に達したときにデータを動的にロードするためのjsの具体的な...
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
1. レンダリング2. 操作手順1. テンセントマップキーを申請する - 住所2. ミニプログラムの...
文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...
目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...
Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...
HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...
このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...