<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PHP+ajax實現二級聯動</title> </head> <body> <select id="province"> <option value="0">請選擇省份</option> <option value="1">北京</option> <option value="2">河北</option> <option value="3">山東</option> </select> <select id="city"> <option value="0">請選擇城市</option> </select> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $("#province").change(function(){ var province = $(this).val(); // 獲取province的value值 if(province == 0){ // province為0的時候停止；否則 return; }else{ var url = 'demo.php'; $.ajax({ url: url, // php的url路徑 type: 'post', data: {province:province}, dataType: 'json', success: function(res) { if(res.code == 200){ var option = '<option>請選擇城市</option>'; var list = res.list; for (var i = 0; i < list.length; i++) { // 循環返回的值（城市） option += "<option>" + list[i] + "</option>"; } }else{ var option = '<option>請選擇城市</option>'; // 請求失敗（默認） } $("#city").html(option); // js刷新第二個下拉框的值 } }) } }) }) </script> </html>
接下來為PHP代碼，注釋已表明；
<?php $province = $_POST['province']; // 獲取ajax傳來的值 $list['1'] = ['朝陽', '海淀', '西城']; $list['2'] = ['保定', '唐山', '邯鄲']; $list['3'] = ['濟南', '菏澤', '日照']; if($list[$province]){ // 數組存在值的情況下 echo json_encode(['code'=>200, 'list'=>$list[$province]]); // 200成功，$list[$province]傳遞相應的數據 }else{ echo json_encode(['code'=>500]); }