jqurey ajax 的动态添加二级联动下拉菜单

aspx

  <div id="Attribute">
        添加类型:<span class="oper">
               <a href="javascript:void(0);" οnclick="s()">[+]</a></span>
        </div>

js

<script type="text/javascript">
        function post(data, f) {
            $.post("InputGoodType.aspx", data, f);
        }
        function ld(obj) {
var id = obj.getElementsByTagName("select")[0].value;
            post("type=drop2&id=" + id, function (r) {
                obj.getElementsByTagName("span")[1].innerHTML = CreateSelect(eval(r));
            })

        }
        function s() {
var div1 = document.getElementById("Attribute");
            div = document.createElement("div");
            div1.appendChild(div);
            post("type=drop", function (r) {
var span = document.createElement("span");
var span1 = document.createElement("span");
                span.innerHTML = CreateSelect(eval(r), 1);
                div.innerHTML = "<a href=\"javascript:void(0);\" οnclick=\"remove(this)\">[-]</a>";
                div.appendChild(span);
                div.appendChild(span1);
                ld(div);
            })
        }
        function CreateSelect(arr, number) {

var str = "<select  style=\"width:200px;\" name=\"att\">";
if (number != undefined) {
                str = "<select οnchange=\"ld(this.parentNode.parentNode)\" style=\"width:200px;\">";
            }
for (var i = 0; i < arr.length; i++) {
                str += "<option value="+arr[i][0]+">"+arr[i][1]+"</option>"
            }
            str += "</select>";
return str;
        }

        function remove(obj) {
            obj.parentNode.parentNode.removeChild(obj.parentNode);
        }
    </script>

cs

  protected void Page_Load(object sender, EventArgs e)
        {

if (!IsPostBack)
            {
if (Request["type"] == "drop")
                {
                    Response.Write(DorpDowenlistBind());
                    Response.End();
return;
                }
if (Request["type"] == "drop2")
                {
                    Response.Write(Drop2list());
                    Response.End();
return;
                }
        }
}

///<summary>
/// 下来菜单数据项绑定
///</summary>
        protected string DorpDowenlistBind()
        {
            StringBuilder strSql = new StringBuilder();

            strSql.Append("[");
            DataTable dt = GClassManager.GetAllList().Tables[0];//获取数据源
            foreach (DataRow dr in dt.Rows)
            {
                strSql.AppendFormat("[\"{0}\",\"{1}\"],", dr["GclassID"], dr["GclassName"]);
            }
            strSql.Append("]");
return strSql.ToString().Replace(",]", "]");
        }
///<summary>
/// 下来菜单数据项绑定
///</summary>
        protected string Drop2list()
        {
            DataTable dt = new DataTable();
if (Request.Form["id"] == null)
            {
                dt = AttributeManager.GetAllList().Tables[0];
            }
else
            {
                dt=AttributeManager.GetList("ClassId=" + Request.Form["id"].ToString() + "").Tables[0];
            }
            StringBuilder strSql = new StringBuilder();
            strSql.Append("[");
foreach (DataRow dr in dt.Rows)
            {
                strSql.AppendFormat("[\"{0}\",\"{1}\"],",dr["AttributeId"],dr["AttributeName"]);
            }
            strSql.Append("]");
return strSql.ToString().Replace(",]","]");
        }

注：把js放在页面的的尾部

广告：亲爱程序员们，工作之余也要注意休息一下哦。喝点水（多喝水的好处不用多说吧），闭闭眼（缓解眼睛酸涩），走一走（小心pp长痘痘），长期面对电脑不担心有辐射（脸上会有斑哦）。有空关注一下微信号kopania,她是一个程序媛，也许不能解答你（高手）的技术问题，但是可以解决你的肌肤问题。是一个对护肤品成分深有研究的人，可以帮你分析你现在所用的护肤品成分是否安全有效。

转载于:https://www.cnblogs.com/piaobodehongmu/archive/2011/10/31/2229801.html