<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanJiLianDong</title> <script type="text/javascript" language="javascript" src="task7.js"> </script> </head> <body> <select name='pro' id='pro' onchange='query(this.value,1)' > <option value='-1'>---请选择省份---</option> <?php include "conn.php"; $query=mysql_query("select * from province"); while($result=mysql_fetch_array($query)){ echo "<option value='".$result['code']."'>"; echo $result['name']; echo "</option>"; } ?> </select> <select name='city' id='city' onchange='query(this.value,2)'> <option value='-1'>---请选择城市---</option> </select> <select name='district' id='district'> <option value='-1'>---请选择地区---</option> </select> </body> </html>
/** * ajax实例化 */ function createXMLRequest() { var ajax; if(window.XMLHttpRequest) { //Mozilla 浏览器 ajax = new XMLHttpRequest(); if (ajax.overrideMimeType) {//设置MiME类别 ajax.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { // IE浏览器 try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!ajax) { // 异常,创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } return ajax; } /** *查询 *@param value:(下拉菜单的value值,即省份或者城市等的编码code,varchar) type:1 or 2(查找类型,int) */ function query(value,type) { //var strUrl = window.location.href; //var arrUrl = strUrl.split("/"); //var strPage = arrUrl[arrUrl.length-1]; //alert(strPage); //+"&from="+strPage if(type == 1){ document.getElementById("district").length = 1; } var ajax = createXMLRequest(); var poststr = "type="+type+"&code="+value; var url = "sql.php"; ajax.open('POST',url,true); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send(poststr); ajax.onreadystatechange = function(){ if(ajax.readyState==4 && ajax.status==200){ handleState(ajax.responseText,type); } } } /** *处理ajax返回值 *@param str:ajax.responseText(ajax返回值,string) type:1 or 2(查找类型,int) */ function handleState(str,type) { var arr = new Array(); var value; var name = new Array(); var code = new Array(); arr = str.split("|"); if(type == 1){ document.getElementById('city').length = 0; document.getElementById("city").options[0] = new Option('---请选择城市---','-1'); for(var i=0;i<Math.ceil(arr.length/2)-1;i++){ value = arr[2*i+1]; AreaText = arr[2*i]; document.getElementById("city").options[i+1] = new Option(AreaText,value); } }else if(type == 2){ document.getElementById('district').length = 0; document.getElementById("district").options[0] = new Option('---请选择地区---','-1'); for(var i=0;i<Math.ceil(arr.length/2)-1;i++){ value = arr[2*i+1]; AreaText = arr[2*i]; document.getElementById("district").options[i+1] = new Option(AreaText,value); } } }