私は州と都市の選択ボックスを国の内訳サイトのようにシミュレートしようとしています。 https://www.nttsbreakdown.com/ntts/programs/main/main.php州と国の内訳のページのような都市選択ボックス
州を選択すると、都市選択ボックスに「データの読み込み」と表示され、その州の都市の一覧がポップアップ表示されます。都市選択ボックスで都市名を検索できます。また、都市選択ボックスも自動的に選択されます。私はシミュレートするために選択したJQueryを使用しようとしていますが、あまり好きではありません。まず、州を選択してクリックして都市を選択する必要があります。国の内訳のサイトと同じように、州と都市をクリックするだけで自動的にドロップダウンし、都市選択ボックスで検索することができます。私は彼らがJQueryを選んだのではなく、何か他のものを使っているのだろうかと思っています。誰かが私を正しい方向に向けることができれば、本当に感謝しています。
正しい方向に導くトピックは、JQuery/Ajax実装またはXHRによる非同期リクエストから始まります。素晴らしいリソースはMDNです。
基本的には、ドロップダウンリスト 'select要素'に対してonchangeイベントが発生し、その関数で変更されると、そのIDまたはsomesortに基づいて都市のデータをプルダウンするリクエストをサービスに行います基準。 XHRにコールバックがあるので、ブラウザをフリーズすることはありません。しかし、リクエストが処理されている間に情報を取得すると、ロードされるセクション（またはこれがXHRリクエストの前に実行される可能性があります）にローディングGIFがポップされます.XHRのコールバック関数では、ロードGIFとドロップダウンリストとWebページの別名要求の完了で正しいデータをポール。
--editは（PHPで）
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="state" list="stateList" name="stateList" />
<datalist id="stateList">
<option value="Texas" />
<option value="Arizona" />
</datalist>
<input id="city" list="cityList" name="cityList" />
<!-- this data list is populated from an ajax request /java script once the state is selected you do a query based on its selected value -->
<datalist id="cityList">
<option value="something1" />
<option value="something2" />
<option value="something3" />
<option value="something4" />
</datalist>
</body>
<script type="text/javascript">
var inputStateHandler = document.getElementById('state');
var inputCityHandler = document.getElementById('city');
inputStateHandler.addEventListener('input', function() {
inputCityHandler.focus();
inputCityHandler.open(); //this is what you need to figure out open does not exist as of yet.
});
</script>
</html>返信いただきありがとうございます。都市選択ボックスを自動的に選択して検索可能にする方法を教えてください。 –
検索可能とはどういう意味ですか？選択ボックスはドロップダウンリストです。あなたが検索可能であることを正確に理解しているかわかりません。しかし、フォーカスを合わせるためには、DOMプロパティを使用してください。document.getElementById（ "selectboxID"）。focus（）;アイテムIDを使用してオブジェクトにフォーカスを設定します。 – Andrei
検索可能とは、都市の最初の文字を入力することができ、選択ボックスは自動的に変更され、都市のリストが文字で始まることを示します。ご協力いただきありがとうございます！ –
、彼らはjQueryの - AJAXとバックエンドのようなREST APIを使用している開始するアイデアを追加しました都市リストを提供する。 –
私はjavascriptを使ってgetcity.phpをロードし、都市のリストの内容を表示する方法を知っています。しかし、ユーザーが状態を選択すると、都市選択ボックスを検索機能で自動的にドロップする方法を理解することはできません。助言がありますか？おかげで多く –