如何通过javascript动态加载select的子选项？！

给个例子给你。
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=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>

解决方案 »

  1.   

    如果你要实现动态 无刷新的效果的化 可以用xmlhttp，
      

  2.   

    本人以前做过全国三级地区查询，最好是用iframe,用javascript 来调用下一级的页面。下一级的页面可以获得一个年份参数，是多少天都可以准确计算，然后父级页放一个hidden的text，二级页把选择的结果返回到父页上来。如果真要严格的话那选哪个月就应该是多少天。这样可以只刷新二级列表框（经过实践二级的会了多少级的都能搞出来），要注意的是把选择的数值通过onchange方法返回到父页中存起来。
      

  3.   

    <!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>
    </head><script language="javascript">
    <!--
        function alter(obj){

    var b=document.form1.select3;
        if(document.form1.select1.value=="2"){
    capacity1.innerHTML="222:";
    capacity2.innerHTML="<input type=text name=capa>";
    b.options[0].text="21";
    b.options[1].text="22";
    b.options.add(new Option("23","23"));
    b.options.add(new Option("24","24"));
    b.options.add(new Option("25","25"));
    }else{
    capacity1.innerHTML="111:";
    capacity2.innerHTML="<input type=text name=capa>";
    b.options[0].text="11";
    b.options[1].text="12";
    //因为删除后options的序号变了,所以虽然下面的删除序号相同,但其实质是删除了不同内容
    b.options.remove(2);
    b.options.remove(2);
    b.options.remove(2);
    }
    }
    ---></script>
    <body>
    <form method="post" name="form1" action="">
    <table border="1">
            <tr class="TdLeftBg">
              <td ><div align="center">类型:</div></td>
              <td ><select name="select1" onChange="alter();" style="width:150">
                  <option value="1" >1</option>
                  <option value="2" >2</option>
                </select>
                  <select name="select3" style="width:150">
                    <option>11</option>
                    <option>12</option>
                </select></td>
              <td id="capacity1"  align="center" >111:</td>
              <td id="capacity2"><input type="text" name="capa">
              </td>
            </tr></table>
    </form>
    </body>
    </html>
    我觉得这是一种思路!!