Web開発プロセス中、州や都市を選択するとき、州と都市の関係は、HTML、CSS、PHP、JS、およびJSを使用する小さな二次的なリンクケースです。
Ajaxの非同期リクエスト
まず、city.php and province.phpファイルとconnet.htmlを作成し、二次リンケージの一般的な構造を書き留めます。 HTMLコードは次のとおりです。
<label>州：</label> <select id = "province"> <option> </option> </select> <abol> city：</label> <select id = "city"> <option> </option> </select>を選択してください
JSコードとAJAXリクエストは次のとおりです。
<script> // Ajax var proventelement = document.getElementbyId（ "province"）; windo.onload = function（）{// core object var xhr = getxhr（）; // rethine xhr.onedstatechange = function（）{if（xhr.readystate = = 4 && xhr.status == {// Shandong Stuent var data = xhr.responsetext; //プロセスデータvar arr = data.split（ '、'）; for（var i = 0; i <arr.length; i ++）{// <option> </option> var opt = document.createelment（ "option"）; var text = document.createTextNode（arr [i]）; Opt.AppendChild（テキスト）; provenceElement.AppendChild（opt）;}}} //接続を作成xhr.open（ "get"、 "provence.php"）; // send data xhr.send（null）;} // City ListをクリアするVar CityElement = document.getElementById（ "City"）; var opts = citylement.getelementsbytagname（ "option"）;ユーザー（州）が選択した値を取得しますvar provencevalue = this.value; if（provenceValue == "選択してください"）{return false;} // c。 city var xhr = getxhr（）; xhr.open（ "post"、 "city.php"）; xhr.setRequestheader（ "content-type"、 "application/x-www-form-urlencoded"）; xhr.send（ "curtiance ="+debincevalue）; && xhr.status == 200）{var data = xhr.responsetext; var arr = data.split（ "、"）; for（var i = 0; i <arr.length; i ++）{// <option> city </option> var opt = document.createelement（ "option"）; var text = document.createTextNode（arr [i]）; Opt.AppendChild（テキスト）; CityElement.AppendChild（opt）;}}}} function getxhr（）{var xhr = null; if（window.xmlhttprequest）{xhr = new xmlhttprequest（）;} else {xhr = new activexobject（ "microsoft.xmlhttp"）;} xhr;} </script> utunce.phpコードは次のとおりです。<？php //州に応答します。city.phpコードは次のとおりです。
<？php //1。クライアント要求データを受け取るデータ$ datus $ _post ['province']; // 2。異なる都市スイッチ（$ stavince）を提供する{ケース 'ジリン州）{echo' changchun都市、onyuan都市、バイシャンシティ、トンフアシティ、リアヨーアン都市 ';ケースブレイク'ジンツー市、ダンドンシティ、ティールシティ。最終的なインターフェイス図は次のとおりです。
上記は、編集者によって導入された第2レベルでの州および市の連携の小さなケースです。それがあなたに役立つことを願っています。もっと知りたい場合は、wulin.comに注意してください！