Ajax实现简单下拉选项效果【推荐】 程序员文章站 2022-10-31 12:12:42 基本都是固定步骤!主要在javascript和php中的操作 1、html代码里就只有两个select标签如下: 基本都是固定步骤!主要在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实现简单下拉选项效果【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。 上一篇: 一个简单Ajax类库及使用方法实例分析 下一篇: 手把手教你创建私有podspec 推荐阅读 ajax实现输入框文字改变展示下拉列表的效果示例 AJAX级联下拉框的简单实现案例 简单实现js选项卡切换效果 vue实现ajax滚动下拉加载,同时具有loading效果(推荐) Android下拉阻尼效果实现原理及简单实例 canvas之万花筒效果的简单实现(推荐) Ajax实现简单下拉选项效果【推荐】 Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐) 简单示例AJAX结合PHP代码实现登录效果代码 Ajax+Servlet实现无刷新下拉联动效果