二个下拉选择框，连动如何实现

nbjed 2006-02-19 09:01:56
第二个下拉选择框内容是对应第一个下拉选择框的选项的，这样如何实现？？？
...全文
171 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
laochake 2006-02-19
  • 打赏
  • 举报
 回复
水
mingxuan3000 2006-02-19
  • 打赏
  • 举报
 回复
mark
chouchy 2006-02-19
  • 打赏
  • 举报
 回复
<script language="javascript">
var depart=new Array("部门1","部门2","部门3","部门4");
var employee=new Array(["11","12"],["21","22","23","24","25","26"],["31","32","33"],["41","42","43","44"]);

function chgSelect(idx)
{
if(idx>0)
{
var s,opt;
s = document.all.employee;
//如果前面已经添加了option,则清除前面添加的option;
if(s.length>1)
{
var len=s.options.length;
for(i=0;i<len;i++)
s.options.remove(1);
}
//追加新的option;
for(j=0;j<employee[idx-1].length;j++)
{
opt = document.createElement("OPTION");
opt.text=opt.value=employee[idx-1][j];
s.add(opt);
}
}
}
</script>


<select name="depart" onchange="chgSelect(this.selectedIndex)">
<option>请选择部门</option>
<script language="javascript">
for(i=0;i<depart.length;i++)
{
document.write("<option value='"+depart[i]+"'>"+depart[i]+"</option>");
}
</script>
</select>
<select name="employee">
<option>请选择人员</option>
</select>
jamsonwoo 2006-02-19
  • 打赏
  • 举报
 回复
var labels = new Array("任意","济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","荷泽");
var values = new Array("","CN3701","CN3702","CN3703","CN3704","CN3705","CN3706","CN3707","CN3708","CN3709","CN3710","CN3711","CN3712","CN3713","CN3714","CN3715","CN3716","CN3717");
break;
case 'CN34' :
var labels = new Array("任意","合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城","徽州");
var values = new Array("","CN3401","CN3402","CN3403","CN3404","CN3405","CN3406","CN3407","CN3408","CN3410","CN3411","CN3412","CN3413","CN3414","CN3415","CN3416","CN3417","CN3418","CN3427");
break;
case 'CN32' :
var labels = new Array("任意","南京","无锡","徐州","常州","苏州","南通","连云港","淮安","盐城","扬州","镇江","泰州","宿迁","淮阴");
var values = new Array("","CN3201","CN3202","CN3203","CN3204","CN3205","CN3206","CN3207","CN3208","CN3209","CN3210","CN3211","CN3212","CN3213","CN3222");
break;
case 'CN33' :
var labels = new Array("任意","杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水");
var values = new Array("","CN3301","CN3302","CN3303","CN3304","CN3305","CN3306","CN3307","CN3308","CN3309","CN3310","CN3311");
break;
case 'CT' :
var labels = new Array("任意","台湾");
var values = new Array("","CT");
break;
case 'HK' :
var labels = new Array("任意","香港");
var values = new Array("","HK");
break;
case 'CN82' :
var labels = new Array("任意","澳门");
var values = new Array("","CN82");
break;
case 'CN44' :
var labels = new Array("任意","广州","韶关","深圳","珠海","汕头","佛山","江门","湛江","茂名","海口","肇庆","惠州","梅州","汕尾","河源","阳江","清远","东莞","中山","梅县","惠阳","潮州","揭阳","云浮");
var values = new Array("","CN4401","CN4402","CN4403","CN4404","CN4405","CN4406","CN4407","CN4408","CN4409","CN4410","CN4412","CN4413","CN4414","CN4415","CN4416","CN4417","CN4418","CN4419","CN4420","CN4424","CN4425","CN4451","CN4452","CN4453");
break;
case 'CN45' :
var labels = new Array("任意","南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","贺州","百色","河池");
var values = new Array("","CN4501","CN4502","CN4503","CN4504","CN4505","CN4506","CN4507","CN4508","CN4509","CN4524","CN4526","CN4527");
break;
case 'CN36' :
var labels = new Array("任意","南昌","景德镇","萍乡","九江","新余","鹰潭","抚州","上饶","赣州","宜春","吉安");
var values = new Array("","CN3601","CN3602","CN3603","CN3604","CN3605","CN3606","CN3610","CN3611","CN3621","CN3622","CN3624");
break;
case 'CN35' :
var labels = new Array("任意","福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德","晋江","龙溪");
var values = new Array("","CN3501","CN3502","CN3503","CN3504","CN3505","CN3506","CN3507","CN3508","CN3509","CN3524","CN3525");
break;
case 'CN46' :
var labels = new Array("任意","海口","三亚");
var values = new Array("","CN4601","CN4602");
break;
case 'OTHER' :
var labels = new Array("任意","其他");
var values = new Array("","OTHER");
break;
}
// 清空市列表选择框的内容
document.form1.city_id.options.length = 0;
// 从数组中添加内容
for(var i = 0; i < labels.length; i++) {
document.form1.city_id.add(document.createElement("OPTION"));
document.form1.city_id.options[i].text=labels[i];
document.form1.city_id.options[i].value=values[i];
}
// 选择第一个选项
document.form1.city_id.selectedIndex = 0;
}
</script>
</head>
<body>
<table>
<FORM NAME="form1" method="GET" action="" target="_blank">
<tr>
<td width="50%">省/市：
<select name="province_id" onChange="setcity()">
<option value="CN11" SELECTED>北京</option>
<option value="CN31">上海</option>
<option value="CN12">天津</option>
<option value="CN50">重庆</option>
<option value="CN23">黑龙江</option>
<option value="CN21">辽宁</option>
<option value="CN22">吉林</option>
<option value="CN13">河北</option>
<option value="CN15">内蒙古</option>
<option value="CN61">陕西</option>
<option value="CN14">山西</option>
<option value="CN62">甘肃</option>
<option value="CN64">宁夏</option>
<option value="CN65">新疆</option>
<option value="CN54">西藏</option>
<option value="CN63">青海</option>
<option value="CN51">四川</option>
<option value="CN53">云南</option>
<option value="CN52">贵州</option>
<option value="CN43">湖南</option>
<option value="CN42">湖北</option>
<option value="CN41">河南</option>
<option value="CN37">山东</option>
<option value="CN34">安徽</option>
<option value="CN32">江苏</option>
<option value="CN33">浙江</option>
<option value="CT">台湾</option>
<option value="HK">香港</option>
<option value="CN82">澳门</option>
<option value="CN44">广东</option>
<option value="CN45">广西</option>
<option value="CN36">江西</option>
<option value="CN35">福建</option>
<option value="CN46">海南</option>
<option value="OTHER">其它</option>
</select >
</td>
<td>市/区：
<select name="city_id">
</select>
</td>
</tr>
</form>
</table>
<SCRIPT LANGUAGE="JavaScript">
setcity();
</SCRIPT>
</body>
</html>
jamsonwoo 2006-02-19
  • 打赏
  • 举报
 回复
<html>

<head>
<script language="javascript">
function setcity() {
switch (document.form1.province_id.value) {
case 'CN11' :
var labels = new Array("任意","市区","昌平","顺义","通县","大兴","房山","平谷","怀柔","密云","延庆");
var values = new Array("","CN1101","CN110221","CN110222","CN110223","CN110224","CN110225","CN110226","CN110227","CN110228","CN110229");
break;
case 'CN12' :
var labels = new Array("任意","市辖区","宁河","武清","静海","宝坻","蓟县");
var values = new Array("","CN1201","CN120221","CN120222","CN120223","CN120224","CN120225");
break;
case 'CN31' :
var labels = new Array("任意","市区","嘉定","宝山","川沙","南汇","奉贤","松江","金山","青浦","崇明");
var values = new Array("","CN3101","CN310222","CN310223","CN310224","CN310225","CN310226","CN310227","CN310228","CN310229","CN310230");
break;
case 'CN50' :
var labels = new Array("任意","市区","郊县");
var values = new Array("","CN5001","CN5002");
break;
case 'CN23' :
var labels = new Array("任意","哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","松花江","嫩江","合江","大兴安岭");
var values = new Array("","CN2301","CN2302","CN2303","CN2304","CN2305","CN2306","CN2307","CN2308","CN2309","CN2310","CN2311","CN2312","CN2321","CN2322","CN2324","CN2327");
break;
case 'CN21' :
var labels = new Array("任意","沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛");
var values = new Array("","CN2101","CN2102","CN2103","CN2104","CN2105","CN2106","CN2107","CN2108","CN2109","CN2110","CN2111","CN2112","CN2113","CN2114");
break;
case 'CN22' :
var labels = new Array("任意","长春","吉林","四平","辽源","通化","白山","松原","白城","延边","永吉","德惠");
var values = new Array("","CN2201","CN2202","CN2203","CN2204","CN2205","CN2206","CN2207","CN2208","CN2224","CN2226","CN2227");
break;
case 'CN13' :
var labels = new Array("任意","石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水");
var values = new Array("","CN1301","CN1302","CN1303","CN1304","CN1305","CN1306","CN1307","CN1308","CN1309","CN1310","CN1311");
break;
case 'CN15' :
var labels = new Array("任意","呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔盟","兴安盟","哲里木盟","昭乌达盟","锡林郭勒盟","乌兰察布盟","伊克昭盟","巴彦淖尔盟","阿拉善盟");
var values = new Array("","CN1501","CN1502","CN1503","CN1504","CN1505","CN1506","CN1521","CN1522","CN1523","CN1524","CN1525","CN1526","CN1527","CN1528","CN1529");
break;
case 'CN61' :
var labels = new Array("任意","西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛");
var values = new Array("","CN6101","CN6102","CN6103","CN6104","CN6105","CN6106","CN6107","CN6108","CN6109","CN6110");
break;
case 'CN14' :
var labels = new Array("任意","太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","雁北","忻县","吕梁","晋东南");
var values = new Array("","CN1401","CN1402","CN1403","CN1404","CN1405","CN1406","CN1407","CN1408","CN1409","CN1410","CN1421","CN1422","CN1423","CN1425");
break;
case 'CN62' :
var labels = new Array("任意","兰州","嘉峪关","金昌","白银","天水","武威","酒泉","张掖","定西","陇南","平凉","庆阳","临夏","甘南");
var values = new Array("","CN6201","CN6202","CN6203","CN6204","CN6205","CN6206","CN6221","CN6222","CN6224","CN6226","CN6227","CN6228","CN6229","CN6230");
break;
case 'CN64' :
var labels = new Array("任意","银川","石嘴山","吴忠","固原","银南");
var values = new Array("","CN6401","CN6402","CN6403","CN6404","CN6421");
break;
case 'CN65' :
var labels = new Array("任意","乌鲁木齐","克拉玛依","石河子","吐鲁番","哈密","昌吉","伊犁","塔城","阿勒泰","博尔塔拉","巴音郭楞","阿克苏","克孜勒苏","喀什","和田");
var values = new Array("","CN6501","CN6502","CN6503","CN6521","CN6522","CN6523","CN6524","CN6525","CN6526","CN6527","CN6528","CN6529","CN6530","CN6531","CN6532");
break;
case 'CN54' :
var labels = new Array("任意","拉萨","昌都","山南","日喀则","那曲","阿里","林芝","江孜");
var values = new Array("","CN5401","CN5421","CN5422","CN5423","CN5424","CN5425","CN5426","CN5427");
break;
case 'CN63' :
var labels = new Array("任意","西宁","海东","海北","黄南","海南","果洛","玉树","海西");
var values = new Array("","CN6301","CN6321","CN6322","CN6323","CN6325","CN6326","CN6327","CN6328");
break;
case 'CN51' :
var labels = new Array("任意","成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","万县","南充","眉山","宜宾","广安","达州","雅安","巴中","资阳","永川","涪陵","内江","温江","绵阳","达县","黔江");
var values = new Array("","CN5101","CN5103","CN5104","CN5105","CN5106","CN5107","CN5108","CN5109","CN5110","CN5111","CN5112","CN5113","CN5114","CN5115","CN5116","CN5117","CN5118","CN5119","CN5120","CN5121","CN5123","CN5124","CN5127","CN5128","CN5130","CN5135");
break;
case 'CN53' :
var labels = new Array("任意","昆明","东川","曲靖","玉溪","保山","昭通","楚雄","红河","文山","思茅","西双版纳","大理","德宏","丽江","怒江","迪庆","临沧");
var values = new Array("","CN5301","CN5302","CN5303","CN5304","CN5305","CN5306","CN5323","CN5325","CN5326","CN5327","CN5328","CN5329","CN5331","CN5332","CN5333","CN5334","CN5335");
break;
case 'CN52' :
var labels = new Array("任意","贵阳","六盘水","遵义","安顺","铜仁","黔西南","毕节","黔东南","黔南");
var values = new Array("","CN5201","CN5202","CN5203","CN5204","CN5222","CN5223","CN5224","CN5226","CN5227");
break;
case 'CN43' :
var labels = new Array("任意","长沙","株洲","湘潭","衡阳","邵阳","岳阳","常德","张家界","益阳","郴州","永州","怀化","娄底","零陵","怀北","湘西");
var values = new Array("","CN4301","CN4302","CN4303","CN4304","CN4305","CN4306","CN4307","CN4308","CN4309","CN4310","CN4311","CN4312","CN4313","CN4329","CN4330","CN4331");
break;
case 'CN42' :
var labels = new Array("任意","武汉","黄石","十堰","沙市","宜昌","襄樊","鄂州","荆门","孝感","荆州","黄冈","咸宁","随州","襄阳","郧阳");
var values = new Array("","CN4201","CN4202","CN4203","CN4204","CN4205","CN4206","CN4207","CN4208","CN4209","CN4210","CN4211","CN4212","CN4213","CN4225","CN4226");
break;
case 'CN41' :
var labels = new Array("任意","郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店");
var values = new Array("","CN4101","CN4102","CN4103","CN4104","CN4105","CN4106","CN4107","CN4108","CN4109","CN4110","CN4111","CN4112","CN4113","CN4114","CN4115","CN4116","CN4117");
break;
case 'CN37' :
fengruzhuo 2006-02-19
  • 打赏
  • 举报
 回复
你说清楚一点，最好举个例子，你的意思是否是
例如
开始时：第一下拉框里的是省份（广东省，湖南省……），第二下拉框为空
如果你第一下拉框里选择了广东省，那么你希望第二个下拉框里出现所有广东省的城市
是要实现这样的东西吗
jamsonwoo 2006-02-19
  • 打赏
  • 举报
 回复
数据表
Product_Class
--------------
iPC_id 自动编号 产品大类表主键
sPC_Name 文本 产品大类表类型名称

Product_Type
--------------
iPT_ID 自动编号 产品小类表主键
sPT_Name 文本 产品小类表类型名称
iPT_PC_Name 文本 产品小类表外键(大类表主键)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>二级联动菜单</title>
<%
dim conn,connstr,db
db="database.mdb"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&db&"")
conn.Open connstr
If Err then
Err.Clear
Set conn = Nothing
Response.Write "系统调整中......请稍候再试！！"
Response.End
End If

dim rs
dim sql
dim count
set rs=server.createobject("adodb.recordset")
sql = "select * from [Product_Type] order by iPT_ID asc"
rs.open sql,conn,1,1
%>
<script language = "JavaScript">

var onecount;
subcat = new Array();
<%
count = 0
do while not rs.eof
%>
subcat[<%=count%>] = new Array("<%= trim(rs("sPT_Name"))%>","<%= trim(rs("iPT_PC_Name"))%>","<%= trim(rs("sPT_Name"))%>");
<%
count = count + 1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>;

function changelocation(locationid)
{
document.myform.SmallClassName.length = 1;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.SmallClassName.options[document.myform.SmallClassName.length] = new Option(subcat[i][0], subcat[i][2]);
}
}
}

</script>

</head>

<body>
<form method="post" name="myform">
<%
sql = "select * from [Product_Class]"
rs.open sql,conn,1,1
if rs.eof and rs.bof then
response.write "请先添加栏目。"
else
%>
<select name="BigClassName" onChange="changelocation(document.myform.BigClassName.options[document.myform.BigClassName.selectedIndex].value)" size="1">
<option selected value="">请选择大类</option>
<%
do while not rs.eof
%>
<option value="<%=trim(rs("sPC_Name"))%>"><%=trim(rs("sPC_Name"))%></option>
<%
rs.movenext
loop
end if
rs.close
%>
</select>
<select name="SmallClassName">
<option value="" selected>选择小类</option>
<%
sql="select * from [Product_Type]"
rs.open sql,conn,1,1
if not(rs.eof and rs.bof) then
do while not rs.eof
%>
<option value="<%=rs("sPT_Name")%>"><%=rs("sPT_Name")%></option>
<%
rs.movenext
loop
end if
rs.close
%>
</form>
</body>
</html>
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章