客户端代码 select.html
[html]
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function sel(str){
if(str==0)return false;
var options = {
method:"get",
asynchronous:true,
parameters:"id="+str,
onSuccess:function(transport,json){
var doc = transport.responseText;
var list = doc.split("|");
$("class").options.length = 1;
for(var i=0;i<list.length-1;i++){
var temp = list.strip().split(",");
$("class").add(new Option(temp[1],temp[0]));
}
},
onFailure:function(transport,json){
alert("调试失败");
}
}
new Ajax.Request("ajax.php",options);
}
</script>
<head>
<body>
<select id="type" onchange="javascript:sel(this.value);">
<option value="0">请选择</option>
<option value="1">公司</option>
<option value="2">电话</option>
<option value="3">传真</option>
</select>
<select id="class">
<option value="0">请选择</option>
</select>
</body>
</html>
[/html]
服务端代码 ajax.php
[php]
<?php
header('Content-Type:text/html;charset=GB2312');
header("expires:mon,26jul199705:00:00gmt");
header("cache-control:no-cache,must-revalidate");
header("pragma:no-cache");
$id = $_GET['id'];
switch ($id){
case 1;
print "1,1号公司|2,2号公司|3,3号公司|";
break;
case 2;
print "1,1号电话|2,2号电话|3,3号电话|";
break;
case 3;
print "1,1号传真|2,2号传真|3,3号传真|";
break;
}
?>
[/php]
演示地址:http://www.lueying.cn/index/select.php
3级联动
3级联动
[html]
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function sel(idname,str,act){
if(str==0)return false;
var options = {
method:"get",
asynchronous:true,
parameters:act+"="+str,
onSuccess:function(transport,json){
var doc = transport.responseText;
var list = doc.split("|");
$(idname).options.length = 1;
for(var i=0;i<list.length-1;i++){
var temp = list.strip().split(",");
$(idname).add(new Option(temp[1],temp[0]));
}
},
onFailure:function(transport,json){
alert("调试失败");
}
}
new Ajax.Request("ajax.php",options);
}
</script>
<head>
<body>
<select id="type" onchange="javascript:sel('class',this.value,'id');">
<option value="0">请选择</option>
<option value="1">公司</option>
<option value="2">电话</option>
<option value="3">传真</option>
</select>
<select id="class" onchange="javascript:sel('three',this.value,'pid');">
<option value="0">请选择</option>
</select>
<select id="three">
<option value="0">请选择</option>
</select>
</body>
</html>
[/html]
[php]
<?php
header('Content-Type:text/html;charset=GB2312');
header("expires:mon,26jul199705:00:00gmt");
header("cache-control:no-cache,must-revalidate");
header("pragma:no-cache");
if(isset($_GET['id'])){
switch ($_GET['id']){
case 1;
print "1,1号公司|2,2号公司|3,3号公司|";
break;
case 2;
print "1,1号电话|2,2号电话|3,3号电话|";
break;
case 3;
print "1,1号传真|2,2号传真|3,3号传真|";
break;
}
}
if(isset($_GET['pid'])){
switch ($_GET['pid']){
case 1;
print "1,11号公司|2,22号公司|3,33号公司|";
break;
case 2;
print "1,11号电话|2,22号电话|3,33号电话|";
break;
case 3;
print "1,11号传真|2,22号传真|3,33号传真|";
break;
}
}
?>
[/php]
分享到：
相关推荐
在IT领域，尤其是在Web开发中，"PHP+AJAX+PROTOTYPE国省市三级联动菜单原型"是一个常见的功能实现，主要用于创建交互性强、用户体验良好的表单元素。这个原型设计旨在通过AJAX技术动态地从服务器端的PHP脚本获取数据...
标题中的“用prototype实现的简单小巧的多级联动菜单”是指使用Prototype JavaScript库来创建一个功能简洁、体积小的多级选择菜单。Prototype是一个流行的JavaScript框架，它提供了一系列的工具和方法来简化DOM操作...
在IT行业中，"prototype+json三级联动"是一个常见的前端开发技术，主要应用于构建具有多级交互功能的用户界面，如下拉菜单、地区选择、商品分类等。在本场景中，我们将探讨如何利用JavaScript的Prototype库和JSON...
在IT领域，无限级联动菜单是一种常见的用户界面设计，它允许用户通过逐级选择来细化他们的选项，例如这里提到的“省-市-区”结构。这种设计在地理信息系统、电子商务网站、信息检索等场景中广泛应用。在.NET环境中，...
标题中的“php无需ajax就可以实现国家省市的3级联动”是指在PHP网页中，通过纯JavaScript实现国家、省、市的三级下拉菜单联动效果，而不需要借助Ajax进行异步数据加载。这种技术通常用于创建动态选择地区时，用户...
本篇将深入探讨如何利用AJAX实现三级联动效果，即在三个下拉菜单中，一个选项的选择会动态地改变下一个下拉菜单的内容，以此类推。 ### 1. AJAX基础 AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与...
08/8.2.9.html 使用abort方法取消一个请求范例 08/8.3.2.html 使用post方法向服务器提交数据范例 08/8.3.3.html 实现服务器相关的二级联动菜单范例 08/a.html 用于ajax获取文件的示例 08/...
在下拉列表多级联动中，Prototype可能会被用来监听`<select>`元素的`change`事件，然后根据用户的选取更新其他下拉列表的内容。 3. **linkage.js**：这是一个自定义的JavaScript脚本，负责实现下拉列表的联动逻辑。...
3. 下拉联动：在多级下拉菜单中，用户选择一项后，下级菜单会根据选择自动填充，实现数据的联动。 4. 数据检索：通过AJAX发送异步请求，后台处理后返回结果，更新前端展示，常见于搜索框的实时检索功能。 三、使用...
通过预设的数据结构，当用户在一级菜单（例如省级）中选择了某个选项后，系统能够自动更新下一级菜单（例如市级）的选项内容。这种方式极大地提高了用户体验，并确保了数据的一致性和准确性。 ### 一、省市二级联动...
8. **兼容性**：由于JavaScript环境的多样性，这个封装类可能已经处理了浏览器兼容性问题，如使用`Array.prototype.forEach`等现代JavaScript特性时，可能使用了polyfill来确保在旧版浏览器中的正常运行。...
假设有一个包含省份、城市、区县三个级别的联动菜单，当用户选择了某个省份后，相应的城市列表会自动更新；同样地，选择了某个城市后，对应的区县列表也会随之改变。这种设计不仅减少了用户的操作步骤，还使得整个...
在网页开发中，"兼容IE浏览器的三级联动代码" 是一个常见的需求，特别是在处理复杂的下拉菜单交互时，如城市选择、地区选择等。三级联动指的是三个相关联的下拉菜单，当用户在一个菜单中做出选择时，其他两个菜单会...
11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的...
11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的...