この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 ステップ* 2つのドロップダウン選択ボックスを持つページを作成する 1. 2次元配列を走査する 2. 結果も配列(国対応) 3. 配列の最初の値を取得し、渡された値と比較する 4. 同じ場合は、最初の値の後の要素を取得します。 5.都市の選択 6. 過去の(使用)appendChildメソッドを追加する /* * 毎回追加する前に、都市にオプションがあるかどうかを確認し、ある場合は削除します コードは次のとおりです。 <html> <ヘッド> <title>州と市の連携</title> <スタイル タイプ = "text/css"> </スタイル> </head> <本文> <select id="countyid" onchange="add1(this.value)"> <option value="0">--選択してください--</option> <option value="中国">中国</option> <option value="米国">アメリカ合衆国</option> <option value="イギリス">イギリス</option> <option value="日本">日本</option> </選択> <選択id="都市ID"> </選択> </本文> <script type="text/javascript"> var arr = 新しい配列(4); arr[0]=["中国","北京","上海","深セン","杭州"]; arr[1]=["アメリカ合衆国","ワシントン","ニューヨーク","デトロイト","シカゴ"]; arr[2]=["イギリス","ロンドン","バーミンガム","リーズ","リバプール"]; arr[3]=["日本","東京","大阪","北海道","長崎"]; /* ステップ: 1. 2次元配列を走査する 2. 配列と国の対応を取得する 3. 配列の最初の値を渡された値と比較する 4. 同じ場合は、最初の値の後の要素を取得する 5. 都市の選択を取得する 6. 過去を追加 - appendChild メソッド - 作成オプション (3 つの手順) 毎回都市にオプションを追加する必要があるので 2 回目に追加するときに追加されます。 * 毎回追加する前に、都市にオプションがあるかどうかを確認し、ある場合は削除します*/ 関数 add1(val){ //都市の選択範囲を取得する var city1 = document.getElementById("cityid"); var ops = city1.getElementsByTagName("オプション"); for(var m=0;m<ops.length;m++){ var op = ops[m]; city1.removeChild(op); m--; } for(var i=0;i<arr.length;i++){ arr1 = arr[i]; var 最初の値 = arr1[0]; (最初の値 == val) の場合 { //オプションを作成する (var j=1;j<arr1.length;j++){ var 値1 = arr1[j]; var option1=document.createElement("オプション"); var text1 = document.createTextNode(値1); オプション1.appendChild(テキスト1); city1.appendChild(オプション1); } } } } </スクリプト> </html> 効果図のデモンストレーション: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順
>>: HTML2 キャンバス SVG が認識されない場合の解決策
1. 互換性以下のように表示されます。 互換性は問題ありません。IE を除き、他のブラウザは基本的に...
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...
最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...
MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...
導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...
序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...
最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...
1. ESを使うこともあるリソースが限られている、またはビジネス上のニーズにより、最新の期間のデータ...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...
設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...