ajax+jQuery實現三級聯動
阿新 • • 發佈：2018-12-11
liandong.html
<!DOCTYPE html> <html> <meta charset='utf-8' /> <script src="jquery-3.3.1.min.js"></script> <body> <select id='sheng' onchange="return sheng()"> <option value=''>請選擇身份</option> <option value='sds'>山東省</option> <option value='hns'>河南省</option> </select> <select id='shi' onchange="return shi()"> <option value=''>請選擇</option> </select> <select id='qu'> <option value=''>請選擇</option> </select> <script type='text/javascript'> function sheng() { var sheng=$("#sheng").val(); $.get('shi.php',{sheng:sheng}, function (data){ $("#shi").html(data); }); } function shi() { var shi=$("#shi").val(); $.get("qu.php",{shi:shi}, function (data){ //alert(data); $("#qu").html(data); }); } </script> </body> </html>
shi.php
<?php include 'config.php'; $sheng = $_GET['sheng']; if($sheng == 'sds') { $str = "<option value=''>請選擇</option><option value='taian'>泰安</option><option value='jinan'>濟南</option>"; echo $str; } if($sheng == 'hns') { $str = "<option value=''>請選擇</option><option value='shangqiu'>商丘</option><option value='pingdingshan'>平頂山</option>"; echo $str; } ?>
qu.php
<?php $shi=$_GET['shi']; if($shi=='taian') { $str="<option value='taishanqu'>泰山區</option><option value='daiyuequ'>岱嶽區</option>"; echo $str; } if($shi=='jinan') { $str="<option value='歷下區'>歷下區</option><option value='歷城區'>歷城區</option>"; echo $str; } if($shi=='shangqiu') { $str="<option value='睢陽區'>睢陽區</option><option value='梁園區'>梁園區</option>"; echo $str; } if($shi=='pingdingshan') { $str="<option value='新華區'>新華區</option><option value='衛東區'>衛東區</option>"; echo $str; } ?>
這是寫死的，如果你想寫活，就通過sql語句來呼叫資料庫~