この記事では、省と市の簡単な連携を実現するための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. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...
環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....
黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...
docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...
この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...
「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...
Ubuntu16.04 のインストールとアンインストール pip実験環境Ubuntu 16.04; ...
解決親要素に position:relative を追加します。子要素に position:abso...
関連文書この記事の一部は、https://www.cnblogs.com/zhongchao666/...
<br />ネットワーク設計の分野では、アイトラッキングに関する研究が非常に盛んに行われ...
目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...