PHP是一種通用性的編程語言,廣泛應用于Web開發中。其中,省市縣級聯菜單是Web開發中經常用到的一種功能,今天我們來介紹下PHP中省市縣級聯菜單的實現方法。
首先,我們需要用到PHP的數組功能。例如可以定義一個$province數組來存儲所有省份的信息,每個省份還可以有對應的城市信息。在這個數組里,我們可以使用鍵值對的方式來表示每個省份和城市信息,例如:
$province = array( '江蘇省' =>array('南京市', '蘇州市', '無錫市'), '廣東省' =>array('廣州市', '深圳市', '中山市'), '浙江省' =>array('杭州市', '寧波市', '溫州市') );以上的數組表示了江蘇省、廣東省、浙江省三個省份,每個省份都對應了一組城市信息。接下來就可以根據用戶輸入的省份信息,來動態生成對應的城市和縣區列表了。 在HTML代碼中,我們可以使用select標簽來實現省市縣級聯菜單。例如下面是一個簡單的HTML代碼實現:在這個HTML代碼中,我們使用了onchange屬性來綁定下拉框變化的事件,同時在option標簽中動態生成了省份和城市信息。其中key代表省份信息,value代表城市數組。在下拉框變化時,我們可以根據用戶選擇的省份,來動態生成對應的城市和縣區列表。 在JS代碼中,我們可以使用AJAX技術來實現動態獲取城市和縣區列表的功能。例如下面是一個簡單的JS代碼實現:
function _selectCity() { var xhr = null; var selPro = document.getElementsByName("province")[0]; var selCity = document.getElementsByName("city")[0]; var selDis = document.getElementsByName("district")[0]; selCity.options.length = 0; selCity.options.add(new Option("請選擇", "")); selDis.options.length = 0; if (selPro.value != "") { xhr = createXHR(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { var json = xhr.responseText; var arr = eval("(" + json + ")"); for (var i = 0; i< arr.length; i++) { selCity.options.add(new Option(arr[i], arr[i])); } selCity.options[0].selected = true; _selectDistrict(); } } } xhr.open("post", "getCity.php", true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("province=" + selPro.value); } } function _selectDistrict() { var xhr = null; var selCity = document.getElementsByName("city")[0]; var selDis = document.getElementsByName("district")[0]; selDis.options.length = 0; selDis.options.add(new Option("請選擇", "")); if (selCity.value != "") { xhr = createXHR(); xhr.onreadystatechange = function () { if (xhr.status == 200) { var json = xhr.responseText; var arr = eval("(" + json + ")"); for (var i = 0; i< arr.length; i++) { selDis.options.add(new Option(arr[i], arr[i])); } selDis.options[0].selected = true; } } xhr.open("post", "getDistrict.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("city=" + selCity.value); } } function createXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { //ie7及以下版本瀏覽器 var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP']; for (var i = 0; i< versions.length; i++) { try { return new ActiveXObject(version[i]); } catch (e) { } } } else { throw new Error('您的瀏覽器不支持XHR對象!'); } }在上面的代碼中,我們使用了XMLHttpRequest對象來發送AJAX請求,并且使用了eval()函數來解析服務器返回的JSON格式字符串。通過AJAX獲取了省份、城市、縣區三個下拉框的數據,實現了省市縣級聯菜單的效果。 總的來說,PHP中省市縣級聯菜單的實現還是比較簡單的。主要的難點在于前端JS代碼的實現和與后端的交互,需要理解AJAX技術和JSON數據格式的處理。如果您還不熟悉這些知識點,可以多到網上查找資料學習。
下一篇css3+菜單下滑