怎样实现两个下拉框之间的关联？

数据库中有两个类别表：一个大类表（shangpin1）一个小类表（shagnpin2）
我现在想实现的功能是：在一个下拉框中选择一个大类，对应的另外的一个下拉框出现的是和大类对应的内容。
类似与选择省出现城市；
谢谢！！

7 个解决方案

#1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Document Title</title>
</head>

<body>
大类：<select id="jia1" onchange="setjia2();">
</select>

小类：<select id="jia2">
</select>

<script language="javascript">
var dat = [

["学习用品","钢笔","铅笔","圆珠笔"],
["办公用品","计算器","圈尺","电话"],
["生活用品","床单","毛刷","脸帕","牙刷","台灯"],
["其它商品","足球","乒乓球","夹子"]

];

var jia1 = document.getElementById("jia1");
var jia2 = document.getElementById("jia2");
for(var i=0; i<dat.length; i++){
jia1.add(new Option(dat[i][0]));
}
(function setjia2(){
jia2.length = 0;
var dat2 = dat[jia1.selectedIndex];
for(var i=1; i<dat2.length; i++){
jia2.add(new Option(dat2[i]));
}
})();
</script>
</body>
</html>

#2

<!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=gb2312" />
<title>连动菜单</title>
<script type="text/javascript">
    var city=new Array();
city[0]=["张家口","承德","廊坊","沧州","保定","衡水","邯郸","邢台","石家庄"];
city[1]=["榆次","长治","大同"];
city[2]=["淄搏","曲阜","青岛"];

function getCity(provinceid){
var objsel=document.getElementById("city");
var pcity;
objsel.options.length=0;
pcity=city[provinceid];
for(var i=0;i<pcity.length;i++){
objsel.options[i]=new Option(pcity[i],pcity[i]);
}
}

</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  省
    <label>
  <select name="province" id="province" onchange="getCity(this.value)">
    <option value="0">河北</option>
    <option value="1">山西</option>
    <option value="2">山东</option>
  </select>
  市    </label>
  <label>
  <select name="city" id="city">
     <option value="-1">请选择城市</option>
  </select>
  </label>
</form>
</body>
</html>
按照上面的方法你可以做成n级连动

#3

谢谢两位了

软件人才，来http://www.sonatamanpower.com/utf/注册了吗？

#4

asp.net
只需要绑定即可

#5

set rs=server.createobject("adodb.recordset")
sql = "select * from SmallClass order by SmallClassID 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("SmallClassName"))%>","<%= trim(rs("BigClassName"))%>","<%= trim(rs("SmallClassName"))%>");
        <%
        count = count + 1
        rs.movenext
        loop
        rs.close
        %>
onecount=<%=count%>;

function changelocation(locationid)
    {
    document.addNEWS.SmallClassName.length = 1;
    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            {
                document.addNEWS.SmallClassName.options[document.addNEWS.SmallClassName.length] = new Option(subcat[i][0], subcat[i][2]);
            }
        }
    }
</script>
以下为BODY部分代码:
<select name="BigClassName" onChange="changelocation(document.addNEWS.BigClassName.options[document.addNEWS.BigClassName.selectedIndex].value)" size="1">
                      <%
    do while not rs.eof
%>
                      <option <% if rs("BigClassName")=rso("BigClassName") then response.Write("selected") end if%> value="<%=trim(rs("BigClassName"))%>"><%=trim(rs("BigClassName"))%></option>
                      <%
        rs.movenext
         loop
end if
        rs.close
%>
                    </select>

#6

<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var city=new Array();
city[0]=new Array("NewYork","LosAngel","Huston");
city[1]=new Array("Shanghai","beijing","HongKong");
city[2]=new Array("Tokyo","Kyoto","Nagoya");
function getCity(cell)
{
var ct=document.getElementById("ct");
var link;
ct.options.length=0;
link=city[cell];
for(var i=0;i<link.length;i++)
{
ct.options[i]=new Option(link[i],link[i]);
}

}
</script>
请输入密码:
<input type="password" onblur="check(this)">
<select name="select" id="select" onchange="getCity(this.value)">
<option value="-1">请选择国家</option>
<option value="0">US</option>
<option value="1">CH</option>
<option value="2">JP</option>
</select>
<select name="ct" id="ct">
<option value="-1">请选择城市</option>
</select>

</body>
</html>

#7

第一个DDL绑定所有数据，选中时
在DDL的selectChange 中选出该条件的数据绑定在DDL二中

#1

#2

#3

谢谢两位了

软件人才，来http://www.sonatamanpower.com/utf/注册了吗？

#4

asp.net
只需要绑定即可

#5

#6

#7

第一个DDL绑定所有数据，选中时
在DDL的selectChange 中选出该条件的数据绑定在DDL二中

秒客网

怎样实现两个下拉框之间的关联？

7 个解决方案

#1

#2

#3

#4

#5

#6

#7

#1

#2

#3

#4

#5

#6

#7

相关文章