在页面里做一div,设置ID为sanji
建一个JS文件,将省市区各做一个方法填充到select里面
// JavaScript Document $(document).ready(function(e){ var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanji").html(str); FillSheng(); FillShi(); FillQu();
//做一个省的改变方法,将市区填充进去 $("#sheng").change(function(){ FillShi(); FillQu(); })
//做一个市的改变方法,将区填充进去 $("#shi").change(function(){ FillQu(); }) })
//填充省的方法 function FillSheng(){ var pcode = "0001";//通过父类代号找到省,用ajax var str = ""; $.ajax({ async:false, url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#sheng").html(str); } }) }
//填充市的方法,首先获取到省的value值,这里的val值是下拉列表<option value值> function FillShi(){ var pcode = $("#sheng").val(); var str = ""; $.ajax({ async:false, url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#shi").html(str); } }) } function FillQu(){ var pcode = $("#shi").val(); var str = ""; $.ajax({ url:"dqchuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value="+lie[0]+">"+lie[1]+"</option>"; } $("#qu").html(str); } }) }
dqchuli.php的处理页面
<?php require_once "./dbda/DBDA.class.php"; $db = new DBDA(); $pcode = $_POST["pcode"]; $sql = "select * from chinastates where ParentAreaCode='{$pcode}'"; echo $db->strquery($sql);