php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动,想当年,为了实现三级联动, - phpStudy...
AJAX实现下拉框联动
想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示。
现在使用AJAX真是太方便了,下面做了个简单例子,实现下拉框的省市联动,效果图如下:
实现代码:
a.html
var req = null;
function test() {
var province = document.all("province").value;
req = new ActiveXObject("Microsoft.XMLHTTP");
//设置属性,当后台处理完成后,回来调用myDeal方法。
req.onreadystatechange = myDeal;
//发出请求
req.open("GET", "c.jsp?province=" + province, "false");
req.send(null);
}
function myDeal() {
if (req.readyState == 4) {
//接收服务端返回的数据
var ret = req.responseText;
//处理数据
var obj = document.all("city");
for (var i = obj.options.length - 1; i >= 0; i--) {
obj.options.remove(i); //从后往前删除
}
var ops = ret.split("|");
for (var i = 0; i
var op = ops[i];
var ss = op.split(",");
var oOption = document.createElement("OPTION"); //创建一个OPTION节点
obj.options.add(oOption); //将节点加入city选项中
oOption.innerText = ss[1]; //设置选择展示的信息
oOption.value = ss[0]; //设置选项的值
}
}
}
省份:
河南
陕西
城市:
郑州
洛阳
c.jsp
String id = request.getParameter("province");
System.out.println("id="+id);
if(id !=null&& id.equals("hn")){
out.println("zz,郑州市|ly,洛阳市");
}else if(id != null && id.equals("sx")){
out.println("xa,西安市|xy,咸阳市");
}
%>
这个功能挺实用的,选项数据可以从数据库中获取,为了把例子做简单点,就用jsp提供数据。相关阅读:
Mashups+AJAX打造全新Web开发
CSS属性与JavaScript 编码方法对照表
设置Linux系统文件权限
用CSS控制IE下中英文字体显示对齐
复制小说文本时出现的随机乱码的去除方法
利用HardwareButton操作Windows Mobile的硬件按钮
Attrib 显示、设置或删除指派给文件或目录的只读、存档、系统以及隐藏属性
oracle如何查看隐藏的参数
MySQL存在权限提升及安全限制绕过漏洞
linux下vi编辑器命令大全
SqlServer 2005 T-SQL Query 学习笔记(2)
JavaScript学习笔记之获取当前目录的实现代码
DEDE验证码输出的时只显示数字方法
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动,想当年,为了实现三级联动, - phpStudy...相关推荐
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- 下拉框三级联动,数据库动态获取数据(springboot+ajax+html+mybatis)
效果展示 数据库设计 第一级数据库设计 第二级数据库设计 第三级数据库设计 都使用code来链接上一级!!! 前端 <select id="petType" name=&qu ...
- 下拉框联动_058-ajax之三级联动案例分析
1 视频中的三级联动案例的功能需求是什么 页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县 ...
- layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
- layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
- extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
功能需求: ①页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框 ②选择省,则市下拉框中出现对应的该省下的市信息,选择市则区/县下拉框中出 现对应的该市下面的区/县信息. 需求分析(思路) ...
- 2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...
- 微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 搜索引擎下拉食云速捷详细_下拉框优化才云速捷一流!下拉框优化虑云速捷豪杰...
现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...
最新文章
- git/github使用详解
- android静默卸载,Android实践 -- Android静默安装和卸载
- php 三方即时通讯_php即时通讯解决方案-请问PHP能否实现即时通讯?
- QT 开发openSSL CSR证书请求工具
- 支付宝错误提示: sign check fail: check Sign and Data Fail JSON also
- JavaScript中奇妙的replace
- Windows下Spring3.x计划任务实现定时备份MySql数据库
- 旗下首发双模5G+双挖孔全面屏!Redmi K30真机谍照曝光
- predicate 列存储索引扫描_MySQL中IS NULL、IS NOT NULL、!=不能用索引?胡扯!
- Boot.ini无解
- 使用PyHive操作Hive
- python 电路仿真spice_电路仿真SPICE入门
- 工资短信生成器如何使用
- 华为 交换机 配置STP
- 深圳哪个驾校比较好?
- myeclipse误删文件恢复
- R 分析裂区试验设计
- 【饭谈】:开发说他要是不写bug,测试就会失业了。
- chmod 777的含义
- 超大气友价商城仿互站源码