几种二级联动案例jQuery\Array\Ajax php

在开发过程中，遇到过非常多的二级联动，下面是我总结出来的几种二级联动案例

二级联动（1）

第一种案例是一种比较简单的二级联动，利用jquery的显示隐藏来实现，对于数据较少的二级联动来说可以采纳

rush:xhtml;">

/引入jquery文件/
<script type="text/javascript" src="jquery-1.11.3.min.js">
<script type="text/javascript">
var currentShowCity=0;
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
currentShowCity=i;
}
});

});
$("#province").change();
});

function getSelectValue(){
alert("1级="+$("#province").val());
$(".city").each(function(i,o){
if(i == currentShowCity){
alert("2级="+$(".city").eq(i).val());
}

});

}

----请选择省份---- 北京 上海 天津 ----请选择城市---- 东城 西城 崇文 宣武 朝阳 丰台 石景山 海淀 门头沟 房山 通州 顺义 昌平 平谷 怀柔 密云 延庆 黄浦 卢湾 徐汇 长宁 静安 普陀 闸北 虹口 杨浦 闵行 宝山 嘉定 浦东 金山 松江 青浦 南汇 奉贤 崇 和平 东丽 河东 西青 河西 津南 南开 北辰 河北 武清 红挢 塘沽 汉沽 大港 宁河 静海 宝坻 蓟县 /*获取数据*/

<input type="button" value="点我" onclick="getSelectValue();">

二级联动（2）- Array

第二种案例是使用二维数组传数据，使用javascript

rush:xhtml;"> 北京 上海 天津 重庆 河北 山西 内蒙古 辽宁 吉林 黑龙江 江苏 浙江 安徽 福建 江西 山东 河南 湖北 湖南 广东 广西 海南 四川 贵州 云南 西藏 陕西 甘肃 宁夏 青海 新疆 香港 澳门 台湾

<select id="city" style="width:60px">

二级联动（3）- Ajax

第三种案例是使用ajax

rush:xhtml;">

<select id="province">

请选择 山东省 辽宁省 吉林省

<select id="city">

请选择

二级联动（3-1）- Ajax/PHP

第三种案例是使用ajax,从PHP中获取数据

rush:xhtml;"> 请选择 山东省 辽宁省 吉林省 请选择

PHP:

rush:PHP;"> // 服务器端响应的是字符串

?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。