动态产生联动下拉框怎么做???

时间:2022-02-14 04:12:24
我用以下联动下拉框做,但是里面的省和城市需要动态添加,应该怎么做??

谢谢~~~~~~~~



<form name=form1>

<select name=sheng onchange="cityName(this.value)">
  <option value="">请选择省名</option>
</select>

<select name=city>
  <option value="">请选择城名</option>
</select>

</form>

<script language=javascript>
var cityouterHTML = document.form1.city.outerHTML.substr(0, document.form1.city.outerHTML.length-9);
function sheng()
{
   var shengName = ["浙江", "江苏", "安徽", "江西"]; //这些数据可以从数据库中取得

   var e = document.form1.sheng;
   var s = e.outerHTML.substr(0, e.outerHTML.length-9) + "\r\n";
       for (var i=0; i<shengName.length; i++){
       s += "<option value='"+ shengName[i] +"'>"+ shengName[i] +"</option>\r\n";}
       s += "</select>";
       e.outerHTML = s;
}  sheng();
function cityName(val)
{
   var 浙江 = ["杭州", "宁波", "温州", "绍兴", "金华", "湖州"];
   var 江苏 = ["南京", "苏州", "无锡", "常州", "镇江", "徐州"];
   var 安徽 = ["合肥", "翕县", "黄山", "祁门", "休宁"];
   var 江西 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"]; 
 //这些数据可以从数据库中取得

   var e = document.form1.city;
   var s = cityouterHTML;
   if (val == "") {s += "</select>"; e.outerHTML = s; return;}
   var a = eval(val);
       for (var i=0; i<a.length; i++)
       {
           s += "<option value='"+ a[i] +"'>"+ a[i] +"</option>\r\n";
       }
       s += "</select>";
       e.outerHTML = s;
}
</script>

6 个解决方案

#1


给个列子给你
<% 
dim isRs 
dim isSQL 
dim count
dim rs1 
dim sql1 
dim rs2 
dim sql2 
dim count2 

isSQL = "Select item_no,item_name,cls_no from rs_basic_item "


Set isRs = Conn.Execute(isSQL)
%> 

<script language = "JavaScript"> 
var onecount; 
onecount=0; 
subcat = new Array(); 
<% 
count = 0 
do while not isRs.eof 
%> 
subcat[<%=count%>] = new Array("<%= trim(isRs("item_name"))%>","<%= trim(isRs("cls_no"))%>","<%= trim(isRs("item_no"))%>"); 
<% 
count = count + 1 
isRs.movenext 
loop 
isRs.close 
set isRs=nothing 
%> 
onecount=<%=count%>; 

function changelocation(locationid) 

document.form1.smalllocation.length = 0; 

var locationid=locationid; 
var i; 
document.form1.smalllocation.options[0] = new Option('==所选区域的范围==',''); 
for (i=0;i < onecount; i++) 

if (subcat[i][1] == locationid) 

document.form1.smalllocation.options[document.form1.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]); 




</script> 



区 &nbsp;&nbsp;&nbsp;域: <select name="biglocation" onChange="changelocation(document.form1.biglocation.options[document.form1.biglocation.selectedIndex].value)" size="1" > 
<option selected>==请选择活动区域==</option> 
<% 

sql1 = "Select cls_no,cls_name from rs_basic_cls "
set rs1 = conn.Execute (sql1) 

do while not rs1.eof 
%> 
<option value="<%=trim(rs1("cls_no"))%>"
<%if id<>"" then
 if  rs1("cls_no")=left(modrs("district"),4) then Response.Write " selected" end if 
 end if %>>
<%=trim(rs1("cls_name"))%></option> 

<% 
rs1.movenext 
loop 

rs1.close 
set rs1 = nothing 
%> 
</select> 



<select name="smalllocation" size="1" style="WIDTH: 170px;"> 

<%if id<>"" then
modsql="Select item_no,item_name from rs_basic_item where cls_no='" &left(modrs("district"),4) & "'"
set MdisRs=conn.execute(modsql)
do while not MdisRs.eof%>
<option  value="<%=trim(MdisRs("item_no"))%>" 
 <%if  mdisrs("item_no")=modrs("district") then Response.Write " selected" end if %>>
<%=trim(MdisRs("item_name"))%></option> 
<%MdisRs.movenext
loop
MdisRs.close
set MdisRs=nothing
else %>
<option selected value="">===所选区域的范围===</option> 
<%end if%>
</select> 


#2


http://expert.csdn.net/Expert/FAQ/FAQ_Index.asp?id=42521

#3


谢谢
不过,你贴的代码有错误~~~~~~~
我这里不能正常显示啊~~~~~~~

#4


给你一个我调试好的例子:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<body onload=DoLoad(powersearch,funtype1);>
<SCRIPT>
  var po_ca_show = new Array();
  var po_ca_value = new Array();
  var po_detail_show = new Array();
  var po_detail_value = new Array();
  var funtype1;

po_ca_show[0]='计算机类';
po_ca_value[0]='0100';
po_detail_show[0]=new Array();
po_detail_value[0]=new Array();
po_detail_show[0][0]='(全部)计算机类';
po_detail_value[0][0]='0100';
po_detail_show[0][1]='信息系统分析员';
po_detail_value[0][1]='0101';
po_detail_show[0][2]='软件开发与测试';
po_detail_value[0][2]='0102';
po_detail_show[0][3]='系统维护/网络管理';
po_detail_value[0][3]='0103';
po_detail_show[0][4]='网络工程';
po_detail_value[0][4]='0104';
po_detail_show[0][5]='网站信息管理/内容编辑';
po_detail_value[0][5]='0105';
po_detail_show[0][6]='网站策划';
po_detail_value[0][6]='0106';
po_detail_show[0][7]='网页设计制作/网页美工';
po_detail_value[0][7]='0107';
po_detail_show[0][8]='多媒体设计与开发';
po_detail_value[0][8]='0108';
po_detail_show[0][9]='计算机辅助设计与绘图';
po_detail_value[0][9]='0109';
po_detail_show[0][10]='数据库开发与管理';
po_detail_value[0][10]='0110';
po_detail_show[0][11]='系统集成/技术支持';
po_detail_value[0][11]='0111';
po_detail_show[0][12]='系统安全管理';
po_detail_value[0][12]='0112';
po_ca_show[1]='电子/邮电/通讯类';
po_ca_value[1]='0200';
po_detail_show[1]=new Array();
po_detail_value[1]=new Array();
po_detail_show[1][0]='(全部)电子/邮电/通讯类';
po_detail_value[1][0]='0200';
po_detail_show[1][1]='电子/电器/电器维修';
po_detail_value[1][1]='0201';
po_detail_show[1][2]='无线电技术';
po_detail_value[1][2]='0202';
po_detail_show[1][3]='自动控制';
po_detail_value[1][3]='0203';
po_detail_show[1][4]='综合布线/弱电';
po_detail_value[1][4]='0204';
po_detail_show[1][5]='广播电视工程';
po_detail_value[1][5]='0205';
po_detail_show[1][6]='通讯工程';
po_detail_value[1][6]='0206';
po_detail_show[1][7]='电路设计/电子测试/半导体技术';
po_detail_value[1][7]='0207';
po_detail_show[1][8]='单片机/DSP/底层软件开发';
po_detail_value[1][8]='0208';
po_ca_show[2]='经营/管理/策划类';
po_ca_value[2]='0300';
po_detail_show[2]=new Array();
po_detail_value[2]=new Array();
po_detail_show[2][0]='(全部)经营/管理/策划类类';
po_detail_value[2][0]='0300';
po_detail_show[2][1]='总裁/总经理/CEO';
po_detail_value[2][1]='0301';
po_detail_show[2][2]='经理助理';
po_detail_value[2][2]='0302';
po_detail_show[2][3]='厂长/副厂长';
po_detail_value[2][3]='0303';
po_detail_show[2][4]='企业策划';
po_detail_value[2][4]='0304';
po_detail_show[2][5]='企业管理/管理顾问';
po_detail_value[2][5]='0305';
po_detail_show[2][6]='技术经理/项目经理/CTO';
po_detail_value[2][6]='0306';
po_detail_show[2][7]='信息主管/CIO';
po_detail_value[2][7]='0307';
po_ca_show[3]='市场销售/营销类';
po_ca_value[3]='0400';
po_detail_show[3]=new Array();
po_detail_value[3]=new Array();
po_detail_show[3][0]='(全部)市场销售/营销类';
po_detail_value[3][0]='0400';
po_detail_show[3][1]='市场经理/营销管理';
po_detail_value[3][1]='0401';
po_detail_show[3][2]='市场/行销策划';
po_detail_value[3][2]='0402';
po_detail_show[3][3]='采购';
po_detail_value[3][3]='0403';
po_detail_show[3][4]='市场调研/业务分析';
po_detail_value[3][4]='0404';
po_detail_show[3][5]='医药代表';
po_detail_value[3][5]='0405';
po_detail_show[3][6]='保险业务/经纪人';
po_detail_value[3][6]='0406';
po_detail_show[3][7]='销售工程师';
po_detail_value[3][7]='0407';
po_detail_show[3][8]='业务员/业务代表';
po_ca_show[4]='金融/经济/贸易类';
po_ca_value[4]='0500';
po_detail_show[4]=new Array();
po_detail_value[4]=new Array();
po_detail_show[4][0]='(全部)金融/经济/贸易类';
po_detail_value[4][0]='0500';
po_detail_show[4][1]='国内贸易';
po_detail_value[4][1]='0501';
po_detail_show[4][2]='对外贸易';
po_detail_value[4][2]='0502';
po_detail_show[4][3]='金融/投资分析';
po_detail_value[4][3]='0503';
po_detail_show[4][4]='证券';
po_detail_value[4][4]='0504';
po_detail_show[4][5]='外汇';
po_detail_value[4][5]='0505';
po_detail_show[4][6]='期货经济';
po_detail_value[4][6]='0506';
po_detail_show[4][7]='资产评估';
po_detail_value[4][7]='0507';
po_detail_show[4][8]='报关员';
po_detail_value[4][8]='0508';
po_detail_show[4][9]='船务';
po_detail_value[4][9]='0509';
</SCRIPT>
      <SCRIPT>
var psid="";

function DoLoad(form,funtypev){
        var n;
        var i,j,k;
        var num;
        num= GetObjID('funtype[]');
        num1= GetObjID('funtypeca');

        if (!funtypev)
           return;
        k=0;
        for (i=0;i<po_ca_show.length;i++) {
         for(j = 0; j < po_detail_value[i].length; j++){
                if(funtypev.indexOf(po_detail_value[i][j])!=-1) {
                    NewOptionName = new Option(po_detail_show[i][j], po_detail_value[i][j]);
                    form.elements[num].options[k] = NewOptionName;
                    k++;
                    }
         }
        }
}

function Do_po_Change(form){
        var num,n, i, m;
        num= GetObjID('d_position1');
        m = document.powersearch.elements[num].selectedIndex-1;
        n = document.powersearch.elements[num + 1].length;
        for(i = n - 1; i >= 0; i--)
                document.powersearch.elements[num + 1].options[i] = null;

        if (m>=0) {
        for(i = 0; i < po_detail_show[m].length; i++){
                NewOptionName = new Option(po_detail_show[m][i], po_detail_value[m][i]);
                document.powersearch.elements[num + 1].options[i] = NewOptionName;
        }
        document.powersearch.elements[num + 1].options[0].selected = true;
        }
}


function GetObjID(ObjName)
{
  for (var ObjID=0; ObjID < window.powersearch.elements.length; ObjID++)
    if ( window.powersearch.elements[ObjID].name == ObjName )
    {  return(ObjID);
       break;
    }
  return(-1);
}
</SCRIPT>
  <form name="powersearch" method="post" action="reg_subscibe.asp">
<table>
<tr>
  <td height="37" colspan="4">&nbsp;</td>
</tr>
<tr> 
            <td align="center" valign="middle"><strong>职能选择</strong></td>
            <td colspan="2"> <SELECT style="WIDTH: 150px" 
            onchange=Do_po_Change(this); name=d_position1 valign="top">
               
               <option value=0000>请选择职能类别</option>
                
                <option value=0100>计算机类</option>
                
                <option value=0200>电子/邮电/通讯类</option>
                
                <option value=0300>经营/管理/策划类</option>
                
                <option value=0400>市场销售/营销类</option>
                
                <option value=0500>金融/经济/贸易类</option>
               
              </select></td>
            <td valign="top">&nbsp;</td>
          </tr>
<tr> 
  <td align="center" valign="top"><strong>职位选择</strong></td>
            
  <td width="160"><select style="WIDTH: 150px" multiple size=5 
                  name=funtypeca>
    </select></td>
</table>
      </form>
</body>
</html>

#5


那到底应该怎么做???

#6


楼主,给你意见
做成二维数组
大类为,比如
第一个
浙江,10;
第二个
浙江,10; 湖州,1005……都放到一个隐藏域里
然后用JS查找前两个一样的,第一个的onchange里

#1


给个列子给你
<% 
dim isRs 
dim isSQL 
dim count
dim rs1 
dim sql1 
dim rs2 
dim sql2 
dim count2 

isSQL = "Select item_no,item_name,cls_no from rs_basic_item "


Set isRs = Conn.Execute(isSQL)
%> 

<script language = "JavaScript"> 
var onecount; 
onecount=0; 
subcat = new Array(); 
<% 
count = 0 
do while not isRs.eof 
%> 
subcat[<%=count%>] = new Array("<%= trim(isRs("item_name"))%>","<%= trim(isRs("cls_no"))%>","<%= trim(isRs("item_no"))%>"); 
<% 
count = count + 1 
isRs.movenext 
loop 
isRs.close 
set isRs=nothing 
%> 
onecount=<%=count%>; 

function changelocation(locationid) 

document.form1.smalllocation.length = 0; 

var locationid=locationid; 
var i; 
document.form1.smalllocation.options[0] = new Option('==所选区域的范围==',''); 
for (i=0;i < onecount; i++) 

if (subcat[i][1] == locationid) 

document.form1.smalllocation.options[document.form1.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]); 




</script> 



区 &nbsp;&nbsp;&nbsp;域: <select name="biglocation" onChange="changelocation(document.form1.biglocation.options[document.form1.biglocation.selectedIndex].value)" size="1" > 
<option selected>==请选择活动区域==</option> 
<% 

sql1 = "Select cls_no,cls_name from rs_basic_cls "
set rs1 = conn.Execute (sql1) 

do while not rs1.eof 
%> 
<option value="<%=trim(rs1("cls_no"))%>"
<%if id<>"" then
 if  rs1("cls_no")=left(modrs("district"),4) then Response.Write " selected" end if 
 end if %>>
<%=trim(rs1("cls_name"))%></option> 

<% 
rs1.movenext 
loop 

rs1.close 
set rs1 = nothing 
%> 
</select> 



<select name="smalllocation" size="1" style="WIDTH: 170px;"> 

<%if id<>"" then
modsql="Select item_no,item_name from rs_basic_item where cls_no='" &left(modrs("district"),4) & "'"
set MdisRs=conn.execute(modsql)
do while not MdisRs.eof%>
<option  value="<%=trim(MdisRs("item_no"))%>" 
 <%if  mdisrs("item_no")=modrs("district") then Response.Write " selected" end if %>>
<%=trim(MdisRs("item_name"))%></option> 
<%MdisRs.movenext
loop
MdisRs.close
set MdisRs=nothing
else %>
<option selected value="">===所选区域的范围===</option> 
<%end if%>
</select> 


#2


http://expert.csdn.net/Expert/FAQ/FAQ_Index.asp?id=42521

#3


谢谢
不过,你贴的代码有错误~~~~~~~
我这里不能正常显示啊~~~~~~~

#4


给你一个我调试好的例子:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<body onload=DoLoad(powersearch,funtype1);>
<SCRIPT>
  var po_ca_show = new Array();
  var po_ca_value = new Array();
  var po_detail_show = new Array();
  var po_detail_value = new Array();
  var funtype1;

po_ca_show[0]='计算机类';
po_ca_value[0]='0100';
po_detail_show[0]=new Array();
po_detail_value[0]=new Array();
po_detail_show[0][0]='(全部)计算机类';
po_detail_value[0][0]='0100';
po_detail_show[0][1]='信息系统分析员';
po_detail_value[0][1]='0101';
po_detail_show[0][2]='软件开发与测试';
po_detail_value[0][2]='0102';
po_detail_show[0][3]='系统维护/网络管理';
po_detail_value[0][3]='0103';
po_detail_show[0][4]='网络工程';
po_detail_value[0][4]='0104';
po_detail_show[0][5]='网站信息管理/内容编辑';
po_detail_value[0][5]='0105';
po_detail_show[0][6]='网站策划';
po_detail_value[0][6]='0106';
po_detail_show[0][7]='网页设计制作/网页美工';
po_detail_value[0][7]='0107';
po_detail_show[0][8]='多媒体设计与开发';
po_detail_value[0][8]='0108';
po_detail_show[0][9]='计算机辅助设计与绘图';
po_detail_value[0][9]='0109';
po_detail_show[0][10]='数据库开发与管理';
po_detail_value[0][10]='0110';
po_detail_show[0][11]='系统集成/技术支持';
po_detail_value[0][11]='0111';
po_detail_show[0][12]='系统安全管理';
po_detail_value[0][12]='0112';
po_ca_show[1]='电子/邮电/通讯类';
po_ca_value[1]='0200';
po_detail_show[1]=new Array();
po_detail_value[1]=new Array();
po_detail_show[1][0]='(全部)电子/邮电/通讯类';
po_detail_value[1][0]='0200';
po_detail_show[1][1]='电子/电器/电器维修';
po_detail_value[1][1]='0201';
po_detail_show[1][2]='无线电技术';
po_detail_value[1][2]='0202';
po_detail_show[1][3]='自动控制';
po_detail_value[1][3]='0203';
po_detail_show[1][4]='综合布线/弱电';
po_detail_value[1][4]='0204';
po_detail_show[1][5]='广播电视工程';
po_detail_value[1][5]='0205';
po_detail_show[1][6]='通讯工程';
po_detail_value[1][6]='0206';
po_detail_show[1][7]='电路设计/电子测试/半导体技术';
po_detail_value[1][7]='0207';
po_detail_show[1][8]='单片机/DSP/底层软件开发';
po_detail_value[1][8]='0208';
po_ca_show[2]='经营/管理/策划类';
po_ca_value[2]='0300';
po_detail_show[2]=new Array();
po_detail_value[2]=new Array();
po_detail_show[2][0]='(全部)经营/管理/策划类类';
po_detail_value[2][0]='0300';
po_detail_show[2][1]='总裁/总经理/CEO';
po_detail_value[2][1]='0301';
po_detail_show[2][2]='经理助理';
po_detail_value[2][2]='0302';
po_detail_show[2][3]='厂长/副厂长';
po_detail_value[2][3]='0303';
po_detail_show[2][4]='企业策划';
po_detail_value[2][4]='0304';
po_detail_show[2][5]='企业管理/管理顾问';
po_detail_value[2][5]='0305';
po_detail_show[2][6]='技术经理/项目经理/CTO';
po_detail_value[2][6]='0306';
po_detail_show[2][7]='信息主管/CIO';
po_detail_value[2][7]='0307';
po_ca_show[3]='市场销售/营销类';
po_ca_value[3]='0400';
po_detail_show[3]=new Array();
po_detail_value[3]=new Array();
po_detail_show[3][0]='(全部)市场销售/营销类';
po_detail_value[3][0]='0400';
po_detail_show[3][1]='市场经理/营销管理';
po_detail_value[3][1]='0401';
po_detail_show[3][2]='市场/行销策划';
po_detail_value[3][2]='0402';
po_detail_show[3][3]='采购';
po_detail_value[3][3]='0403';
po_detail_show[3][4]='市场调研/业务分析';
po_detail_value[3][4]='0404';
po_detail_show[3][5]='医药代表';
po_detail_value[3][5]='0405';
po_detail_show[3][6]='保险业务/经纪人';
po_detail_value[3][6]='0406';
po_detail_show[3][7]='销售工程师';
po_detail_value[3][7]='0407';
po_detail_show[3][8]='业务员/业务代表';
po_ca_show[4]='金融/经济/贸易类';
po_ca_value[4]='0500';
po_detail_show[4]=new Array();
po_detail_value[4]=new Array();
po_detail_show[4][0]='(全部)金融/经济/贸易类';
po_detail_value[4][0]='0500';
po_detail_show[4][1]='国内贸易';
po_detail_value[4][1]='0501';
po_detail_show[4][2]='对外贸易';
po_detail_value[4][2]='0502';
po_detail_show[4][3]='金融/投资分析';
po_detail_value[4][3]='0503';
po_detail_show[4][4]='证券';
po_detail_value[4][4]='0504';
po_detail_show[4][5]='外汇';
po_detail_value[4][5]='0505';
po_detail_show[4][6]='期货经济';
po_detail_value[4][6]='0506';
po_detail_show[4][7]='资产评估';
po_detail_value[4][7]='0507';
po_detail_show[4][8]='报关员';
po_detail_value[4][8]='0508';
po_detail_show[4][9]='船务';
po_detail_value[4][9]='0509';
</SCRIPT>
      <SCRIPT>
var psid="";

function DoLoad(form,funtypev){
        var n;
        var i,j,k;
        var num;
        num= GetObjID('funtype[]');
        num1= GetObjID('funtypeca');

        if (!funtypev)
           return;
        k=0;
        for (i=0;i<po_ca_show.length;i++) {
         for(j = 0; j < po_detail_value[i].length; j++){
                if(funtypev.indexOf(po_detail_value[i][j])!=-1) {
                    NewOptionName = new Option(po_detail_show[i][j], po_detail_value[i][j]);
                    form.elements[num].options[k] = NewOptionName;
                    k++;
                    }
         }
        }
}

function Do_po_Change(form){
        var num,n, i, m;
        num= GetObjID('d_position1');
        m = document.powersearch.elements[num].selectedIndex-1;
        n = document.powersearch.elements[num + 1].length;
        for(i = n - 1; i >= 0; i--)
                document.powersearch.elements[num + 1].options[i] = null;

        if (m>=0) {
        for(i = 0; i < po_detail_show[m].length; i++){
                NewOptionName = new Option(po_detail_show[m][i], po_detail_value[m][i]);
                document.powersearch.elements[num + 1].options[i] = NewOptionName;
        }
        document.powersearch.elements[num + 1].options[0].selected = true;
        }
}


function GetObjID(ObjName)
{
  for (var ObjID=0; ObjID < window.powersearch.elements.length; ObjID++)
    if ( window.powersearch.elements[ObjID].name == ObjName )
    {  return(ObjID);
       break;
    }
  return(-1);
}
</SCRIPT>
  <form name="powersearch" method="post" action="reg_subscibe.asp">
<table>
<tr>
  <td height="37" colspan="4">&nbsp;</td>
</tr>
<tr> 
            <td align="center" valign="middle"><strong>职能选择</strong></td>
            <td colspan="2"> <SELECT style="WIDTH: 150px" 
            onchange=Do_po_Change(this); name=d_position1 valign="top">
               
               <option value=0000>请选择职能类别</option>
                
                <option value=0100>计算机类</option>
                
                <option value=0200>电子/邮电/通讯类</option>
                
                <option value=0300>经营/管理/策划类</option>
                
                <option value=0400>市场销售/营销类</option>
                
                <option value=0500>金融/经济/贸易类</option>
               
              </select></td>
            <td valign="top">&nbsp;</td>
          </tr>
<tr> 
  <td align="center" valign="top"><strong>职位选择</strong></td>
            
  <td width="160"><select style="WIDTH: 150px" multiple size=5 
                  name=funtypeca>
    </select></td>
</table>
      </form>
</body>
</html>

#5


那到底应该怎么做???

#6


楼主,给你意见
做成二维数组
大类为,比如
第一个
浙江,10;
第二个
浙江,10; 湖州,1005……都放到一个隐藏域里
然后用JS查找前两个一样的,第一个的onchange里