表单一级分类变化自动更新二级分类下拉列表总结:

这篇博客总结了在HTML页面中动态更新下拉菜单的三种方法:1) hardcode于HTML的JavaScript,2) 从数据库读取,3) 通过XML文件存储数据并用JavaScript读取。作者推荐第三种方法,因为它能实现数据源与JavaScript的分离,适用于数据经常变动的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。  
         
  <html>  
  <head>  
  <title>List</title>  
  <meta   http-equiv="Content-Type"   content="text/html;   c  
  harset=gb2312">  
  <script   LANGUAGE="javascript">  
  <!--  
  var   onecount;  
  onecount=0;  
   
  subcat   =   new   Array();  
  subcat[0]   =   new   Array("徐汇区","01","001");  
  subcat[1]   =   new   Array("嘉定区","01","002");  
  subcat[2]   =   new   Array("黄浦区","01","003");  
  subcat[3]   =   new   Array("南昌市","02","004");  
  subcat[4]   =   new   Array("九江市","02","005");  
  subcat[5]   =   new   Array("上饶市","02","006");  
   
  onecount=6;  
   
  function   changelocation(locationid)  
  {  
  document.myform.smalllocation.length   =   0;  
   
  var   locationid=locationid;  
  var   i;  
  document.myform.smalllocation.options[0]   =   new   Option('====所有地区====','');  
  for   (i=0;i   <onecount;   i++)  
  {  
  if   (subcat[i][1]   ==   locationid)  
  {  
  document.myform.smalllocation.options[document.myform.smalllocation.length]  
  =   new   Option(subcat[i][0],   subcat[i][2]);  
  }  
  }  
   
  }  
   
  //-->  
  </script>  
  </head>  
  <body>  
  <form   name="myform"   method="post">  
  <select   name="biglocation"  
  onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">  
  <option   value="01"   selected>上海</option>  
  <option   value="02">江西</option>  
  </select>  
  <select   name="smalllocation">  
  <option   selected   value="">==所有地区==</option>  
  </select>  
  </form>  
  <script   LANGUAGE="javascript">  
  <!--  
  changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);  
  //-->  
  </script>  
  </body>  
  </html>  
   
   
  2)javascript   直接读取数据库,取数据库中的记录写入javascript中,然后和第一种方法一样,调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开,但,公开数据库的连接,从安全角度说,没有多少实用价值。  
   
   
  我的方法是将下拉框中的数据放在XML文件中,用javascript读XML文件,取得下拉框中的内容。  
   
  HTML   文件如下:  
  <!--   myfile.html   -->  
   
  <html>  
  <head>  
  <script   language="JavaScript"   for="window"   event="onload">  
  var   xmlDoc   =   new   ActiveXObject("Microsoft.XMLDOM");  
  var   i=0;  
  var   j=0;  
  var   subclass_name="";  
  loadXML();  
  function   loadXML(){  
  xmlDoc.async="false";  
  xmlDoc.load("account.xml");  
  xmlObj=xmlDoc.documentElement;    
  nodes   =   xmlDoc.documentElement.childNodes;  
  document.frm.mainclass.options.length   =   0;    
  document.frm.subclass.options.length   =   0;  
   
  for   (i=0;i<xmlObj.childNodes.length;i++){  
  labels=xmlObj.childNodes(i).getAttribute("display_name");  
  values=xmlObj.childNodes(i).text;  
  document.frm.mainclass.add(document.createElement("OPTION"));  
  document.frm.mainclass.options[i].text=labels;    
  document.frm.mainclass.options[i].value=values;    
   
  }  
   
  }  
   
   
  </script>  
   
  <script   language="JavaScript"   >  
  var   xmlDoc   =   new   ActiveXObject("Microsoft.XMLDOM");  
  var   i=0;  
  var   j=0;  
   
  function   deleteOption()   {  
           
  }  
   
  function   setsubclass(main){  
  var   is_selected="N";  
  if   (document.frm.subclass.options.length!=0)   {    
  for   (i=0;i<=document.frm.subclass.options.length;i++)  
  document.frm.subclass.options[i]=null   ;  
  }  
  //重复才有效  
  if   (document.frm.subclass.options.length!=0)   {    
  for   (i=0;i<=document.frm.subclass.options.length;i++){  
  document.frm.subclass.options[i]=null   ;  
  document.frm.subclass.options.remove(i);  
  }  
  }  
   
   
  for   (i=0;i<xmlObj.childNodes.length;i++){  
   
  var   values="";  
  var   lables="";  
   
  if   (is_selected=="Y")   return;  
  labels=xmlObj.childNodes(i).getAttribute("display_name");  
  values=xmlObj.childNodes(i).text;  
  //alert(labels+   "   |   "+main);  
  if   (labels==main){  
   
  is_selected="Y";  
   
  for   (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){  
  //subclass_name="document.frm.subclass";  
  labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");  
  values=xmlObj.childNodes(i).childNodes(j).text;  
  //alert(values);    
  document.frm.subclass.add(document.createElement("OPTION"));  
  document.frm.subclass.options[j].text=labels;    
  document.frm.subclass.options[j].value=values;    
   
  }  
   
  }  
   
  }  
  }  
  </script>  
   
  <title>在HTML中调用XML数据</title>  
  </head>  
  <body   bgcolor="#FFFFFF">  
  <FORM   NAME="frm">    
  类型<SELECT   NAME="mainclass"   OnChange='setsubclass(this[selectedIndex].text)'></SELECT>  
  <option   selected   value=""     ></option>  
  子类<SELECT   NAME="subclass"></SELECT>  
  </form>  
  </body>  
  </html>  
   
  account.xml   如下:  
   
   
  <?xml   version="1.0"   encoding="GB2312"?>  
   
  <item>  
  <class   display_name="未选定">  
  <subclass   display_name="">Not   Available</subclass>    
  </class>  
  <class   display_name="95788主叫卡">  
  <subclass   display_name="1152069589-1152069638">dangdang1</subclass>    
  <subclass   display_name="1152081031-1152081080">dangdang2</subclass>  
  <subclass   display_name="1152547201-1105254750">dangdang3</subclass>  
  <subclass   display_name="1152548401-1152548700">dangdang4</subclass>  
  <subclass   display_name="1152548701-1152549000">dangdang5</subclass>  
  <subclass   display_name="1156000001-1156010000">dangdang6</subclass>  
  </class>  
  <class   display_name="网上注册">  
  <subclass   display_name="1152000001-1152001000">zhuce_user1</subclass>    
  <subclass   display_name="1151001000-1151005000">zhuce_user2</subclass>  
  </class>  
  <class   display_name="通讯">  
  <subclass   display_name="1156030001-1156080000">tongxun</subclass>    
  </class>  
   
  </item>  
   
  此方法将数据源与javascript程序分开,适合经常变化的数据源。xmlDoc.load中可以直接调用URL参数,读取远程XML,实现松耦合。以上应用在IE6.0中通过。不足之处是在去除下拉框列表内容时需要。

 


--------------------------------------------------------------------------------------[下面是第一种方法的asp 写法]

 

'取子分类于rs1
dim count
set rs1=server.createobject("adodb.recordset")
sql = "select * from jxkhzbzzfl order by zzfl_id asc"
rs1.open sql,conn,1,1
'-----------------------------------------
'将子分类记录写入数组subcat(子类名、父ID、子ID
'-----------------------------------------
%>

<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();

<%count = 0
do while not rs1.eof %>
   subcat[<%=count%>] = new Array("<%= trim(rs1("zzfl_name"))%>","<%= trim(rs1("year"))%>","<%= trim(rs1("zzfl_id"))%>");
   <%count = count + 1
   rs1.movenext
loop
rs1.close
%>
//列出所有子分类于数组subcat中供后面使用
//var   subcat   =   new   Array();    
//subcat[0]   =   new   Array('10','1','=1')    
//subcat[1]   =   new   Array('10','2','=2')
 
//subcat[0][0]='10'   //rs1("zfl_name")
//subcat[0][1]='1'    //rs1("zzfl_id")
//subcat[0][2]='=1'   //rs1("zfl_id")

//subcat[1][0]='10'  
//subcat[1][1]='2'  
//subcat[1][2]='=2'
//.....


onecount=<%=count%>;


function changelocation(locationid)
{
    document.form.zzfl_id.length = 0;
    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)//
            {
                document.form.zzfl_id.options[document.form.zzfl_id.length] = new Option(subcat[i][0], subcat[i][2]);
                //document.form.zzfl_id.length第一次为0,过出某大类的所有子类
            }       
        }
       
    }  
   
//      onchange="changelocation(this.options.selectIndex)"
//应该是onchange="changelocation(this.options.selectedIndex)"

//new option();应该是 new Option();//大写的O


//<select id="s">
//</select>
//var option = new Option( "abc", "2312" );
//document.all.s.options[0] = option;
//var option2 = new Option( "def", "2312" );
//document.all.s.options[1] = option2;
//Option是 select 中的选择项,str1 是页面中看到的描述,而str2是这一项的值,比如
//<option value="这里是str2">这里是str1</option>
//new option(); 一般用在动态生成选择项目
    
</script>

 

 

一级分类

<select name="my1" onChange="changelocation(document.form.my1.options[document.form.my1.selectedIndex].value)">
 <option value="2008" <%if myear="2008" then %>selected<%end if%>>2008</option>
 <option value="2009" <%if myear="2009" then %>selected<%end if%>>2009</option>

</select>

二级分类

<select name="zzfl_id">
   <%              
   set rs2=server.createobject("ADODB.recordset")
   rs2.open "select * from jxkhzbzzfl   where year='" & myear & "'",conn,1,1
   if rs2.eof then
   else
   do while not rs2.eof
   if cstr(rs2("zzfl_id"))=cstr(mzzfl_id) then
   %>
   
              <option value="<%=rs2("zzfl_id")%>" selected><%=rs2("zzfl_name")%></option>             
              <%else%>             
              <option value="<%=rs2("zzfl_id")%>" ><%=rs2("zzfl_name")%></option>
              <%end if
             
              rs2.movenext
     loop
     rs2.close
     set rs2=nothing
     end if
     %></select>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值