この記事では、省と都市間の連携効果を実現するための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 ストレージ構成領域ファイル) の概要
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...
さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...
目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...
この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...
yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...
1. ESを使うこともあるリソースが限られている、またはビジネス上のニーズにより、最新の期間のデータ...
次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...
序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...
以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/...
原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
ドラッグ アンド ドロップはフロントエンドでよく使われる機能であり、多くのエフェクトで js のドラ...
MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...