ajax联动下拉选框(地区城市选择)【php】_huangguaxuan的博客-程序员宅基地

技术标签: query  php  mysql  ajax  url  sql  

sql code
CREATE   TABLE  `city` (
  `ID` 
int ( 3 NOT   NULL  auto_increment COMMENT  '自增ID' ,
  `parentID` 
int ( 3 NOT   NULL  COMMENT  '父ID' ,
  `title` 
varchar ( 50 character   set  gbk collate gbk_bin  NOT   NULL  COMMENT  '省份或是城市' ,
  
PRIMARY   KEY   (`ID`)
);

-- 
-- 导出表中的数据 `city`
-- 

INSERT   INTO  `city` (`ID`, `parentID`, `title`)  VALUES  
(
1 0 , 江苏),
(
2 0 , 广东),
(
3 2 , 珠海),
(
4 2 , 广州),
(
5 1 , 苏州),
(
6 1 , 南京);

页面:index.php   HTML code
< html >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > Ajax联动菜单 </ title >  
</ head >  
< body >  
<? php
    mysql_connect("localhost", "root", "123");
    mysql_select_db("city");
    mysql_query("set names gb2312");
    $sql = "Select * From city where parentID=0";
    $result = mysql_query($sql);
?>
< form  name ="form1"  method ="post"  action ="" >  
    
< select  name ="select1"  id ="select1"  onChange ="startRequest('select2',this.value)" >  
    
< option  value =0 > 省份 </ option >
        
<? php
            while($arr = mysql_fetch_array($result))
            {
        
?>
      
< option  value ="<?php echo $arr['ID'];?>" > <? php echo $arr['title']; ?> </ option >
      
<? php
          }
      
?>
    
</ select >  
</ p >
  
< p >  
    
< select  name ="select2"  id ="select2" >
    
< option > 城市 </ option >
    
</ select >  
    
</ form >  
< script  language ="javascript" >  
//var ab = new Array(); 
var xmlHttp; 

function createXMLHttpRequest() 
    
if (window.ActiveXObject) 
        xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP"); 
    }
  
    
else if (window.XMLHttpRequest) 
        xmlHttp 
= new XMLHttpRequest(); 
    }
 
}
 
var tag;
function startRequest(item,url) 
    createXMLHttpRequest(); 
    xmlHttp.onreadystatechange 
= handleStateChange; 
    document.getElementById(item).options.length 
= 1;
   
//var url = document.form1.select1.value; 
    //var qurl = "getCities.php?countryCode="+url; 
    var qurl = "getCities.php?id="+url+"&time="+new Date().getTime();
    tag
=item;
    xmlHttp.open(
"GET", qurl, true); 
    xmlHttp.send(
null); 
   
//setTimeout("startRequest()",2000); 
}
 
    
function handleStateChange() 
    
if(xmlHttp.readyState == 4
        
if(xmlHttp.status == 200
           
var obj = document.getElementById(tag);
            
if(xmlHttp.responseText.length==0{
                obj.style.display
="none";
            }

            
else{
                obj.style.display
="";
                eval(xmlHttp.responseText); 
            }

        }
 
    }
 
}
 
</ script >  
</ body >  
</ html >  

页面: getCities.php    PHP code
<? php 
header ( " Content-type:text/html; charset=gb2312 " );
if ( isset ( $_GET [ ' id ' ])){
    
mysql_connect ( " localhost " ,   " root " ,   " 123 " );
    
mysql_select_db ( " city " );
    
mysql_query ( " set names gb2312 " );
    
$id   =   $_GET [ ' id ' ];
    
$sql   =   " select * from city where parentID =  " . $id ;
    
$result   =   mysql_query ( $sql );
    
while ( $arr   =   mysql_fetch_array ( $result ))
    {
        
echo   " obj.options[obj.options.length] = new Option(' " . $arr [ " title " ] . " ',' " . $arr [ " ID " ] . " '); "
    }

?>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huangguaxuan/article/details/2416889

智能推荐

Lamp环境搭建_普通网友的博客-程序员宅基地

lamp环境的搭建并不是什么难题。Lamp集成开发环境网上到处都是,但对于在新版CentOS 7.0 上安装环境,还是和之前有些差别的。并且既然要学习php开发,能对环境中的各个服务器有一定的了解还是很有必要的。所以在此总结下此次的Lamp在CentOS 7.0上搭建过程。顺便熟悉熟悉对CentOS 7.0的使用。这次在CentOS 7.0 上搭建La...

win7激活一万遍都没解决的同学请看过来_小兰子ealby的博客-程序员宅基地_win7密钥 知乎

win7激活一万遍都没解决的同学请看过来,可能是你工具没下对。

XML基础_CorlorfulXuan的博客-程序员宅基地

1、xml(可扩展的标记性语言)的作用用来保存数据,而且这些数据具有自我描述性;可以作为项目或者模块的配置文件;可以作为网络传输数据的格式(现在以JSON为主)。eg:&lt;?xml version="1.0" encoding="utf-8" ?&gt;&lt;!--xml文件的声明,version表示版本,encoding表示编码--&gt;&lt;students&gt;&lt;!--表示多个学生信息--&gt; &lt;student id="20181002832"&g

如何在本地启动简易 Http 服务器_sigmarising的博客-程序员宅基地_npx serve

如何在本地启动简易 Http 服务器由于 Chrome 等众多浏览器默认禁止加载本地 js 文件,这导致了很多前端项目必须使用 Http 静态服务器去启动。本文将会介绍几种简单的方法启动本地的 Http 服务器。1. 使用 Node.js1.1 Node.js 安装直接使用官网安装包即可。安装完成后,可以将 npm 源更换为 taobao 以加快速度,详细可参考更换 npm 镜像源为 taobao。1.2 方案一 使用 http-server在需要监听的文件夹打开命令行,输入命令:npx

orika1.5.1版本的map死循环问题_zlj1217的博客-程序员宅基地

问题现象在测试环境看到机器cpu报警,且cpu是突然升起来并且一直稳定跑满在百分之90左右。观察流量和接口的qps,并没有突然增加或者有突刺。问题排查上机器top -H -p pid + jstack观察之后发现很多http线程卡在orika的一个weakHashMap的get方法中:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1YgzDzP-1590335021764)(https://zlj1217-blog-image.oss-cn-hongkong.ali

HDFS------namenode 初始化_「已注销」的博客-程序员宅基地_初始化namenode

简单地讲,NameNode的初始化,对应到代码上就是调用main方法,在main方法中调用NameNode namenode = createNameNode(argv, null);在createNameNode方法中对format和finalize两种状态进行处理,如果不是这两种状态那么,调用NameNode namenode = new NameNode(conf);在NameNod

随便推点

Linux命令之convmv命令_恒悦sunsite的博客-程序员宅基地_convmv

单个文件编码转换我们可以使用系统自带的命令iconv,命令使用可以参考[Linux命令之iconv命令](https://blog.csdn.net/carefree2005/article/details/123706744)。如果是整个中文文件夹及你们的文件全是乱码怎么办呢?这个时候我们可以使用convmv命令,通过-r参数完成整个目录里文件编码的转换。convmv能帮助我们很容易地对一个文件,一个目录下所有文件进行编码转换,比如gbk转为utf8等。convmv命令除了转换编码还可以转换文件名为大写或

element-ui 的upload组件,before-upload验证不通过后触发了on-remove方法的内容(已解决)_shiqi236的博客-程序员宅基地_不触发handlebeforeupload 没校验通过就不触发handleupload

element-ui 的upload组件,before-upload验证不通过后触发了on-remove方法的内容(已解决)vue :&lt;el-upload :headers="myHeaders" class="upload-demo" :action="homeVideoUploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"

句柄 Handle 的通俗解析_枯岭决的博客-程序员宅基地

句柄 :相当于一个编号,可以唯一标识一个对象、资源、服务。起类似对象指针的作用,创建句柄就是构造,销毁句柄就是析构,用句柄调用函数相当于传入this指针。句柄是操作系统的一种引用。它没有编程参考的语义,但它做的是让系统资源知道在API调用中传递时所指的内容。handle 最初被微软翻译为“把手”。握住“把手”就可以唯一控制这个“门”。后来被翻译成蹩脚的“句柄”……

编程语言流行指数 排行网站_sigmarising的博客-程序员宅基地

编程语言流行指数 排行网站The PYPL (PopularitY of Programming Language) 每隔一段时间,会公布最受欢迎的编程语言、IDE、ODE、数据库榜单。是一个十分有意思的网站。相关链接:The PYPL PopularitY of Programming Language...

Flutter : 创建底部导航栏_BunnyCoffer的博客-程序员宅基地

import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter_module/FindPage.dart';import 'HomePage.dart';/** * 主页 */class MainPage extends StatefulWidget { @override _MainPageState createState() =&gt.

推荐文章

热门文章

相关标签