js 二级联动菜单
2010-04-12 16:31
507 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form</title>
<mce:style><!--
.selected{
background:#0F9;
}
--></mce:style><style mce_bogus="1">.selected{
background:#0F9;
}</style>
<mce:script src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected").siblings('.child_' + this.id).toggle();
});
$("#filterName").keyup(function(){
$('table tbody tr').hide().filter(":contains("+$(this).val()+")").show();
});
});
// --></mce:script>
<mce:script type="text/javascript"><!--
function getCity(obj) {
var arr=new Array('bj东城区','bj西城区','bj崇文区','bj宣武区','bj朝阳区','bj丰台区','bj石景山区','bj海淀区','bj门头沟区','bj房山区','bj通州区','bj顺义区','bj昌平区','bj大兴区','bj平谷区','bj怀柔区','bj密云区','bj延庆区','sh黄浦区','sh卢湾区','sh徐汇区','sh长宁区','sh静安区','sh普陀区','sh闸北区','sh虹口区','sh杨浦区','sh闵行区','sh宝山区','sh嘉定区','sh浦东区','sh金山区','sh松江区','sh青浦区','sh南汇区','sh奉贤区','sh崇明县','tj和平区','tj东丽区','tj河东区','tj西青区','tj河西区','tj津南区','tj南开区','tj北辰区','tj河北区','tj武清区','tj红桥区','tj溏沽区','tj汉沽区','tj大港区','tj宁河区','tj静海县','tj宝坻区','tj蓟县','cq万州','cq涪陵','cq渝中','cq大渡口','cq江北','cq沙坪坝','cq九龙坡','cq南岸','cq北培','cq万盛','cq双挢','cq渝北','cq巴南','cq黔江','cq长寿','cq綦江','cq潼南','cq铜梁','cq大足','cq荣昌','cq壁山','cq梁平','cq城口','cq丰都','cq垫江','cq武隆','cq忠县','cq开县','cq云阳','cq奉节','cq巫山','cq巫溪','cq石柱','cq秀山','cq酉阳','cq彭水','cq江津','cq合川','cq永川市','cq南川市','he石家庄市','he邯郸市','he邢台市','he保定市','he张家口市','he承德市','he廊坊市','he唐山市','he秦皇岛市','he沧州市','he衡水市','sx太原市','sx大同市','sx阳泉市','sx长治市','sx晋城市','sx朔州市','sx吕梁市','sx忻州市','sx晋中市','sx临汾市','sx运城市','nm呼和浩特市','nm包头市','nm乌海市','nm呼伦贝尔盟','nm阿拉善盟','nm哲里木盟','nm兴安盟','nm乌兰察布盟','nm哲里木盟','nm兴发盟','nm锡林郭勒盟','nm巴彦淖尔盟','nm伊克昭盟','ln沈阳市','ln大连市','ln鞍山市','ln抚顺市','ln本溪市','ln丹东市','ln锦州市','ln营口市','ln阜新市','ln辽阳市','ln盘锦市','ln铁岭市','ln朝阳市','ln葫芦岛市','jl长春市','jl吉林市','jl四平市','jl辽源市','jl通化市','jl白山市','jl松原市','jl白城市','jl延边市','hl哈尔滨市','hl齐齐哈尔市','hl牡丹江市','hl佳木斯市','hl大庆市','hl绥化市','hl鹤岗市','hl鸡西市','hl黑河市','hl双鸭山市','hl伊春市','hl七台河市','hl大兴安岭市','js南京市','js镇江市','js苏州市','js南通市','js扬州市','js盐城市','js徐州市','js连云港市','js常州市','js无锡市','js宿迁市','js淮安市','js泰州市','zj杭州市','zj绍兴市','zj湖州市','zj金华市','zj衢州市','zj嘉兴市','zj宁波市','zj舟山市','zj丽水市','zj台州市','zj温州市','ah合肥市','ah蚌埠市','ah马鞍山市','ah六安市','ah芜湖市','ah滁州市','ah宿州市','ah池州市','ah毫州市','ah黄山市','ah淮北市','ah淮南市','ah安庆市','ah铜陵市','ah巢湖市','ah阜阳市','ah宣城市','fj福州市','fj厦门市','fj泉州市','fj莆田市','fj漳州市','fj三明市','fj龙岩市','fj宁德市','fj南平市','jx南昌市','jx景德镇市','jx九江市','jx鹰潭市','jx萍乡市','jx新余市','jx赣州市','jx吉安市','jx宜春市','jx抚州市','jx上饶市','sd济南市','sd青岛市','sd淄博市','sd枣庄市','sd东营市','sd烟台市','sd潍坊市','sd济宁市','sd泰安市','sd威海市','sd日照市','sd莱芜市','sd临沂市','sd德州市','sd聊城市','sd滨州市','sd荷泽市','ha郑州市','ha开封市','ha洛阳市','ha平顶山市','ha安阳市','ha鹤壁市','ha新乡市','ha焦作市','ha濮阳市','ha许昌市','ha漯河市','ha三门峡市','ha南阳市','ha商丘市','ha信阳市','ha周口市','ha驻马店市','ha济源市','hb武汉市','hb宜昌市','ha荆州市','ha襄樊市','ha黄石市','ha荆门市','ha黄冈市','ha十堰市','ha恩施州市','ha潜江市','ha天门市','ha仙桃市','ha随州市','ha咸宁市','ha孝感市','ha鄂州市','hn长沙市','hn常德市','hn株洲市','hn湘潭市','hn衡阳市','hn岳阳市','hn邵阳市','hn娄底市','hn怀化市','hn郴州市','hn永州市','hn湘西市','hn张家界市','gd广州市','gd深圳市','gd惠州市','gd珠海市','gd东莞市','gd湛江市','gd佛山市','gd江门市','gd中山市','gd汕头市','gd茂名市','gd肇庆市','gd梅州市','gd汕尾市','gd阳江市','gd韶关市','gd河源市','gd潮州市','gd清远市','gd揭阳市','gd云浮市','gx南宁市','gx柳州市','gx桂林市','gx防城港市','gx河池市','gx百色市','gx梧州市','gx钦州市','gx北海市','gx玉林市','gx贺州市','gx贵港市','gx来宾市','hi海口市','hi三亚市','hi文昌市','hi儋州市','hi东方市','hi琼山市','hi五指山市','sc成都市','sc德阳市','sc绵阳市','sc自贡市','sc攀枝花市','sc广元市','sc内江市','sc乐山市','sc南充市','sc宜宾市','sc广安市','sc达川市','sc雅安市','sc眉山市','sc甘孜市','sc凉山市','sc泸州市','gz贵阳市','gz六盘水市','gz遵义市','gz安顺市','gz同仁市','gz黔西南','gz毕节市','gz黔东南','gz黔南市','yn昆明市','yn大理市','yn曲靖市','yn玉溪市','yn昭通市','yn楚雄市','yn红河市','yn文山市','yn思茅市','yn西双版纳','yn保山市','yn德宏市','yn丽江市','yn怒江市','yn迪庆市','yn临沧市','xz拉萨市','xz日喀则','xz山南市','xz林芝市','xz昌都市','xz阿里市','xz那曲市','sn西安市','sn宝鸡市','sn咸阳市','sn铜川市','sn渭南市','sn延安市','sn榆林市','sn汉中市','sn安康市','sn商洛市','gs兰州市','gs嘉峪关市','gs酒泉市','gs金昌市','gs白银市','gs天水市','gs张掖市','gs武威市','gs定西市','gs陇南市','gs平凉市','gs庆阳市','gs临夏市','gs甘南市','nx银川市','nx石嘴山市','nx吴忠市','nx固原市','nx银川市','nx海南市','nx海东市','nx海北市','nx海西市','nx玉树市','nx果洛市','xj乌鲁木齐市','xj石河子市','xj克拉玛依市','xj伊犁市','xj巴音郭勒市','xj昌吉市','xj克孜勒苏柯尔克孜市','xj博尔塔拉市','xj吐鲁番市');
var objCity=document.getElementById("city");
objCity.options.length=0; //在这里报错提示option未定义
for(var i=0;i<arr.length;i++) {
if(arr[i].substring(0,2)==obj) {
objCity.options.add(new Option(arr[i].substring(2),i));
}
}
objCity.options[0].selected=true;
}
// --></mce:script>
</head>
<body>
<input type="text" id="filterName" />
<table style="border:1px solid red" mce_style="border:1px solid red">
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_02"><td>赵六</td><td>男</td><td>浙江温州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江</td></tr>
<tr class="child_row_03"><td>MAX</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
<select name="province" id="province" onChange="getCity(this.options[this.selectedIndex].value);">
<option>------请选择------</option>
<option value="bj">北京</option><option value="tj">天津</option><option value="he">河北省</option><option value="sx">山西省</option><option value="nm">内蒙古自治区</option><option value="ln">辽宁省</option><option value="jl">吉林省</option><option value="hl">黑龙江省</option><option value="sh">上海</option><option value="js">江苏省</option><option value="zj">浙江省</option><option value="ah">安徽省</option><option value="fj">福建省</option><option value="jx">江西省</option><option value="sd">山东省</option><option value="ha">河南省</option><option value="hb">湖北省</option><option value="hn">湖南省</option><option value="gd">广东省</option><option value="gx">广西壮族自治区</option><option value="hi">海南省</option><option value="cq">重庆</option><option value="sc">四川省</option><option value="gz">贵州省</option><option value="yn">云南省</option><option value="xz">西藏</option><option value="sn">陕西省</option><option value="qh">青海省</option><option value="gs">甘肃省</option><option value="nx">宁夏回族自治区</option><option value="xj">新疆维吾尔族自治区</option><option value="tw">台湾</option></select>
<select name="city" id="city"><option>请选择城市</option></select>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS省市二级联动菜单
- JS+html 实现select二级联动菜单
- JS省市二级联动网页特效菜单
- js二级联动菜单
- 利用JS实现一个简单的二级联动菜单
- css+js 版本的二级二级联动选择菜单
- js实现的全国省市二级联动下拉选择菜单完整实例
- 一个简单的js的省市二级联动菜单（转）
- js基础-input对象，select对象，实例：二级联动菜单
- JS仿FLASH特效可跳转回首页的CSS二级联动菜单
- 非常简单的二级联动js菜单 [收藏]
- jsp+js实现的二级联动菜单
- js二级联动菜单
- PHPCMS V9 导航条联动二级菜单（配合js css鼠标移动上去向下弹出显示二级菜单）
- JS省市二级联动菜单,sky整理收集。
- jsp+js实现的二级联动菜单
- 原生js实现二级联动下拉列表菜单
- js实现二级联动菜单
- js入门·表单元素（select下拉列表）制作二级联动菜单和网站导航
- js实现菜单二级联动