<html xmlns=" http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<head>
<title>代码实例:级联菜单 </title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312" />
<meta name="author" content="枫岩,CNLei.y.l@gmail.com">
</head>
<body>
<select id="BigCate" name="BigCate" size="1" onchange="Redirect(this.options.selectedIndex)">
<option value="">全市</option>
<option value="">主城区</option>
<option value="">分公司</option></select>
<select id="SmlCate" name="SmlCate" size="1">
<option value="1">全市</option>
</select>
<script type="text/javascript">
<!--
var groups = document.getElementById("BigCate").options.length
var group = new Array(groups)
for (i = 0i <groupsi ++)
group[i] = new Array()group[0][0] = new Option("全市","ALL")group[1][0] = new Option("北部新区局","CJ0")
group[1][1] = new Option("杨家坪局","CY0")
group[1][2] = new Option("沙坪坝局","CP0")
group[1][3] = new Option("观音桥局","CG0")
group[1][4] = new Option("上清寺局","CS0")
group[1][5] = new Option("南坪局","CN0")group[2][0] = new Option("渝北电信公司","CF0")
group[2][1] = new Option("璧山电信公司","CA0")
group[2][2] = new Option("江津电信公司","CU0")
group[2][3] = new Option("合川电信公司","CK0")
group[2][4] = new Option("北碚电信公司","CI0")group[2][5] = new Option("巴南电信公司","CB0")
group[2][6] = new Option("永川电信公司","CH0")
group[2][7] = new Option("万州电信公司","WW0")
var temp = document.getElementById("SmlCate")
function Redirect(x){ for (m = temp.options.length-1m >0m --)
temp.options[m] = null
for (i = 0i <group[x].lengthi ++){
temp.options[i] = new Option(group[x][i].text,group[x][i].value)
alert(group[x][i].value)
}
temp.options[0].selected = true
}
//-->
</script></body>
</html>这个代码是入门的最佳辅助代码
引入jquery来帮助你实现.比较简单.给你一个例子吧.后台是用PHP写的.html文件内容
<html>
<meta http-equiv="Content-type" content="text/htmlcharset=utf-8" ></meta>
<head>
<title>
demo
</title>
<script src="jquery.js" type="text/javascript"></script><!--引入jquery -->
<script>
function getarea(){
var region_id = $("#region").val()//获得下拉框中大区域的值
if(region_id != ''){
$.ajax({
type: "post",
url: "b.php",
data:"region_id="+region_id,
cache:false,
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){
//alert(data)
$("#area").empty()//清空area下拉框
$("#area").append(data)//给area下拉框添加option
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
//请求出错处理
}
})
}
}
</script>
</head>
<body>
<div >
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<select id="region" name="region" onchange="getarea()">
<option value="">请选择</option>
<option value="1">东北</option>
<option value="2">华北</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="area" name="area">
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
=============
b.php内容
<?php
$region_id = $_POST['region_id']
//根据前台传过来的region_id来处理下拉框的内容.
//这里演示直接输出,你可以从数据库中读出来组织后再输出.
switch($region_id){
case 1:{
$area_option = "<option value='1'>辽宁</option><br><option value='2'>吉宁</option><br><option value='3'>黑龙江</option>"
echo $area_option
break
}
case 2:{
$area_option = "<option value='4'>北京</option><option value='5'>天津</option><option value='6'>河北</option>"
echo $area_option
break
}
}
?>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）