基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作

1、HTML代码里就只有两个SELECT标签如下:

<select id="province">
<option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>

2、Javascript中进行创建选项和执行AJAX异步请求步骤如下

<script>
var xhr = getXhr();
// 第一次执行Ajax异步请求 - 省份
window.onload = function(){
xhr.open("get","finaly.php?state=1");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
// 将字符串转换为数组
var provinces = data.split(",");
// 遍历数组
for(var i=0;i<provinces.length;i++){
// 创建option元素添加到id为province元素上
var option = document.createElement("option");
var text = document.createTextNode(provinces[i]);
option.appendChild(text);
var province = document.getElementById("province");
province.appendChild(option);
}
}
}
}
// 第二次执行Ajax异步请求 - 城市
var provinceEle=document.getElementById("province");
provinceEle.onchange = function(){
var city = document.getElementById("city");
var opts = city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
} if(province.value != "请选择"){
xhr.open("post","finaly.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+province.value);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
var cities = data.split(",");
for(var i=0;i<cities.length;i++){
var option = document.createElement("option");
var text = document.createTextNode(cities[i]);
option.appendChild(text); city.appendChild(option);
}
}
}
} } function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>

  3、PHP代码如下:文件名为:finaly.php与JS中:xhr.open(method,url)方法的url对接!

<?php
// 接收客户端发送的请求数据 - state
$state = $_REQUEST['state'];
// 判断$state的值
if($state == 1){// 获取省份
echo '山东省,辽宁省,吉林省';
}else{// 获取城市
$province = $_POST['province'];
switch ($province){
case '山东省':
echo '青岛市,济南市,威海市,日照市,德州市';
break;
case '辽宁省':
echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
break;
case '吉林省':
echo '长春市,松原市,吉林市,通化市,四平市';
break;
}
}
?>

关键就是如何实现AJAX异步交互:参考JS代码。可以说的固定步骤

Ajax实现简单下拉选项的更多相关文章

  1. Ajax做列表无限加载和Ajax做二级下拉选项

    //栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index ...

  2. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  3. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  4. Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. [js开源组件开发]模拟下拉选项框select

    模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...

  7. Excel设置下拉选项的方法

    前些日子参加提高班组织的数据采集工作,到各个二级学院搜集数据,当然离不开我们常用的Excel表格了.在这次采集数据的过程过程中还真学到了一两招.就比如在Excel中设置下拉选项的方法. 例如我们要在A ...

  8. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

  9. 用Ajax遍历三级下拉框

    用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...

随机推荐

  1. EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel

    首先,最近在搞那个DataGrid的导出,发现,网上的用JS导出到本地的方法虽然可用,但是只能导出DataGrid当前的数据,例如说,DataGrid默认是最大显示50行,但是如果有多页,那么就无法显 ...

  2. 取消vs2013在solution中单击打开文件的功能

    2013用了一段时间,不错,就是单击会打开文件,有点恼人(因人而异吧).解决方案: 取消红色框框里面的那个checkbox就ok了. 来自为知笔记(Wiz)

  3. iOS 保持界面流畅的技巧 (转载)

    这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路,同时给出一个开源的微博列表实现,通过实际的代码展示如何构建流畅的交互. Index 演示项目 屏幕显示图像的原理 卡顿产生 ...

  4. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  5. TCP三次握手和四次挥手状态变迁解析

    TCP是TCP/IP的传输层控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 首先需要了解几个名词:tcp标志位,有6种分别为:SYN(synchronous建立联机) .ACK(ackn ...

  6. 【Debug】Web开发中,Tomcat正常启动,访问欢迎页404,怎么办?

    访问页面出现404是一个会经常遇到的问题.每次开发Web项目时总要掉这个坑里几次,而且还不长记性.今天来总结一下,开发时遇到这个问题的解决思路. 1. 查看访问地址是否正确,有无拼写错误. 越是低级的 ...

  7. spring boot 添加拦截器

    构建一个spring boot项目. 添加拦截器需要添加一个configuration @Configuration @ComponentScan(basePackageClasses = Appli ...

  8. java枚举类型学习

    用的不多,但用的时候仅仅简单的使用,不太明白原理,今天就系统的学一下枚举.参考:java编程思想. Update: 枚举可以当做数据字典来存储,通常只要一个字段即instance本身,toString ...

  9. maven全局配置文件settings.xml详解

    概要 settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径. settings.xml文件是干什么的,为什么要配置它 ...

  10. 一个简单的Webservice的demo(中)_前端页面调用

    首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...