js二级联动小问题

我的问题是：想用js的domcore模型循环输出<option>内容</option>,请问各位大虾如何实现！因为我做的是一个二级联动的select，我希望在选择大类时，把大类名称传到二级select，这样可以通过大类名称到数据库中搜索出所有的小类名称，然后做一个循环，动态的输出<option>小类名称</option>
//这是1级联动
<select name="select" onChange="gb();">
<%
sql="select * from BigClass_down where BigClassName='各地招聘' or BigClassName='求职简历' or BigClassName='同城交友'  or BigClassName='宠物用品'  or BigClassName='二手物品'  or BigClassName='生活服务'  or BigClassName='商务服务'  or BigClassName='票务/优惠打折'  or BigClassName='各地兼职'  or BigClassName='车辆买卖'  or BigClassName='教育培训'   or BigClassName='同城活动'"
rs.open sql,conn,1
do while not rs.eof
%>
                  <option value="<%=rs("bigclassname")%>"><%=rs("bigclassname")%></option>
<%
rs.movenext
loop
%>
                </select>
//下面是函数
function gb()
{
//我想通过这个函数，动态的生成二级联动(这个目的已到达)，（未到达的目的是）我想通过获取1级联动的大类名称，来从数据库中搜索出小类名称，并循环输出<option>小类名称</option>，如何才能到达这个目的呢
if (document.getElementById("select2")) return false;
var selectmc0=document.getElementById("select");
var selectmc=document.createElement("select"); selectmc.setAttribute("name","select2");
selectmc.setAttribute("id","select2");

var svalue=selectmc0.getAttribute("value"); var option2=document.createElement("option"); option2.setAttribute("value","1");
var text1=document.createTextNode("各地招聘");option2.appendChild(text1);
selectmc.appendChild(option2); var parent=selectmc0.parentNode;
parent.insertBefore(selectmc,selectmc0.nextSibling);

}

解决方案 »

  1.   

    function gb() { var selectmc0=document.getElementById("select");
    var selectmc2 = null; // 验证是否select2 建立select2的过程
    if (!selectmc2 = document.getElementById("select2")) {


    selectmc2=document.createElement("select"); selectmc2.setAttribute("name","select2");
    selectmc2.setAttribute("id","select2"); var parent=selectmc0.parentNode;
    parent.insertBefore(selectmc2, selectmc0.nextSibling);
    } // 每次清空select2
    selectemc2.options.length = 0; // 每次可以追加一个选项提示（可选）
    selectemc2.appendChild(getOption('-1', '子选项'));
        
       
        // 下面的事情是ajax干的事情了，那jquery做演示
     var svalue=selectmc0.getAttribute("value");
    $.get('phpforajax/getopiton.php?svalue='+svalue, null, function(data){
    // 假设返回的内容 '{1:"a",2:"c"}' 字符串
    data = eval('('+data+');');
    for(k in data) {
    selectmc2.appendChild(getOption(k, data[k]));
    }
    });}function getOption(value, tips) {
    var option=document.createElement("option");
    option.setAttribute("value", value); option.appendChild(document.createTextNode(tips));
    return option;
    }
    仅做演示，你可以参照修改
      

  2.   

    c#<!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>
        <title></title>
        <script language="javascript" type="text/javascript">
            var xhr;
            var num;
            function CreateXmlHttp() {
                if (window.ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else {
                    xhr = new XMLHttpRequest();
                }
            }
            function SendReq() {
                CountryID = document.getElementById("Country").value;
                CreateXmlHttp();
                var url = "Test.ashx?CountryID=" + CountryID;
                xhr.open("GET", url, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = xhr.responseText;
                        document.getElementById("City").innerHTML = result;
                    }
                }
                xhr.send(null);
            }
        </script>
    </head>
    <body>
        <select id="Country" onchange="SendReq()">
            <option value="1">中国</option>
            <option value="2">美国</option>
        </select>
        <span id="City"></span>
    </body> 
    </html><%@ WebHandler Language="C#" Class="Test" %>using System;
    using System.Text;
    using System.Web;
    using System.Data;
    using System.Data.SqlClient;public class Test : IHttpHandler {
        public void ProcessRequest (HttpContext context) 
        {
            context.Response.ContentType = "text/plain";
            StringBuilder builder = new StringBuilder();
            if (context.Request.QueryString["CountryID"]!=null)
            { 
                builder.Append("<select>");
                int countryID = int.Parse(context.Request.QueryString["CountryID"]);
                string sqlCn = "Data Source=.;Initial Catalog=Test;Integrated Security=True;";
                //根据国家编号查询数据表中的城市编号，城市名
                string sqlCmd = "select CityID,CityName from City Where CountryID="+countryID;
                //根据前台的请求 查询需要的数据
                using (SqlConnection cn = new SqlConnection(sqlCn))
                {
                    SqlCommand cmd = new SqlCommand(sqlCmd,cn);
                    cn.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        builder.Append("<option value='"+dr["CityID"].ToString()+"'>"+dr["CityName"].ToString()+"</option>");
                    }
                    dr.Close();
                    builder.Append("</select>");
                }
            }
            //返回前台请求的数据
            context.Response.Write(builder.ToString());
        }
     
        public bool IsReusable 
        {
            get {
                return false;
            }
        }}