jQuery制作的简化三级联动菜单

来源：互联网发布：淘宝飞猪靠谱吗编辑：程序博客网时间：2024/06/14 21:17

一、效果图

根据对第一个下拉框选择的省份，第二个下拉框自动生成相应的市，又根据第二个下拉框选择的市，第三个下拉框生成相应的县或区

二、源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery制作三级联动菜单</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
var sheng=['广西省','广东省','福建省'];
var shi=[['桂林市','南宁市','河池市'],['广州市','深圳市','佛山市'],['三明市','福州市','厦门市']]
var xian=[
[['阳朔县','永福县','兴坪县'],['隆安县','宾阳县','横县'],['巴马县','东兰县','凤山县']],
[['白云区','天河区','花都区'],['福田区','南山区','罗湖区'],['南海区','高明区','顺德区']],
[['明溪县','宁化县','沙县'],['罗源县','连江县','永清县'],['思明区','集美区','同安区']]
];
var one;
var two;
var str;
var stt;
for(var i=0;i<sheng.length;i++)
{
$("#list1").append('<option>'+sheng[i]+'</option>');
}

$("#list1").change(function()//对省级下拉框进行监听
{
$("#list2").children("option").not(":eq(0)").remove();//每次选择省，清除市级下拉框
$("#list3").children("option").not(":eq(0)").remove();//每次选择省，清除县级级下拉框
one=$(this).children("option:selected").index(); //获取选中选项的索引值
str=shi[one-1];//根据索引获取相对的市级
for(var j=0;j<str.length;j++)//利用循环对市级下拉框进行赋值
{
$("#list2").append('<option>'+str[j]+'</option>');
}
}
);

$("#list2").change(function()
{
$("#list3").children("option").not(":eq(0)").remove();
two=$(this).children("option:selected").index();//获取选中的市级选项的索引值
//alert(one);
//alert(two);
stt=xian[one-1][two-1];//在县级数组中找到相应的县或区
for(var z=0;z<stt.length;z++)
{
$("#list3").append('<option>'+stt[z]+'</option>');
}
}
);

});
</script>
</head>
<body>
<select id="list1">
<option>--请选项--</option>
</select>

<select id="list2">
<option>--请选项--</option>
</select>

<select id="list3">
<option>--请选项--</option>
</select>

</body>
</html>

阅读全文

0 0