做教师知识网站有哪些,天津网站建设方案服务,视频制作软件app手机版免费版,wordpress 海报基本都是固定步骤#xff01;主要在JAVASCRIPT和PHP中的操作1、HTML代码里就只有两个SELECT标签如下#xff1a;请选择请选择2、Javascript中进行创建选项和执行AJAX异步请求步骤如下var xhr getXhr();// 第一次执行Ajax异步请求 - 省份window.onload function(){xhr.open(…基本都是固定步骤主要在JAVASCRIPT和PHP中的操作1、HTML代码里就只有两个SELECT标签如下请选择请选择2、Javascript中进行创建选项和执行AJAX异步请求步骤如下var xhr getXhr();// 第一次执行Ajax异步请求 - 省份window.onload function(){xhr.open(get,finaly.php?state1);xhr.send(null);xhr.onreadystatechange function(){if(xhr.readyState4xhr.status200){var data xhr.responseText;// 将字符串转换为数组var provinces data.split(,);// 遍历数组for(var i0;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 provinceEledocument.getElementById(province);provinceEle.onchange function(){var city document.getElementById(city);var opts city.getElementsByTagName(option);for(var zopts.length-1;z0;z--){city.removeChild(opts[z]);}if(province.value ! 请选择){xhr.open(post,finaly.php);xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.send(provinceprovince.value);xhr.onreadystatechange function(){if(xhr.readyState4xhr.status200){var data xhr.responseText;var cities data.split(,);for(var i0;ivar 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;}3、PHP代码如下文件名为finaly.php与JS中xhr.open(method,url)方法的url对接// 接收客户端发送的请求数据 - 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实现简单下拉选项效果【推荐】就是小编分享给大家的全部内容了希望能给大家一个参考也希望大家多多支持脚本之家。
