DIV CSS 佈局教程網

<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></ASP:DropDownList>
<asp:DropDownList ID="ddl2" runat="server" Width="100px" ></ASP:DropDownList>

 <asp:DropDownList ID="ddl3" runat="server" Width="100px" ></ASP:DropDownList>

JS:

 <script src="js/jquery-1.4.2.min.JS" type="text/Javascript" ></script>
    
    <script type="text/Javascript">

        $(document).ready(function () {        
            GetA();
            $("#ddl1").change(function () { GetB();  });          
            $("#ddl2").change(function () { GetC();  });         
        });      
        
    function GetA()
    {
        $("#ddl1").html("");
        $("#ddl1").append("<option value='-1' selected='selected'>請選擇...</option>");
        //$("select[name$=ddl1] > option:selected").remove();
        var strId = 0;
        $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
         for (var i = 0; i < data.length; i++) {
             $("select[name$=ddl1]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
         };
         GetB();          
     });
                 
    }
    function GetB()
    {
        $("#ddl2").html(""); $("#ddl3").html("");
        var strId = $("#ddl1").attr("value");       
        if (strId != 0) {
            $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("select[name$=ddl2]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
                };
                GetC();              
            });                            
        }           
    }
    function GetC()
    {
        $("#ddl3").html("");
        var strId = $("#ddl2").attr("value");  
        if (strId != 0) {
            $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("select[name$=ddl3]").append($("<option></option>").val(data[i].ID).Html(data[i].Cname));
                };                        
            });                 
        }        
    }
</script>

 

LoadClass.ashx:

<%@ WebHandler Language="C#" Class="LoadClass" %>

using System;
using System.Web;

using System.Text;
using System.Data;

public class LoadClass : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        // 數組   [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
        int strId = Convert.ToInt32(context.Request["ddlId"]);               
        string strSQL = "select * from Class where parent_Ptr=" + strId + "  order by classOrder asc ";
        db d = new db();
        DataTable dt = d.getDT(strSQL);
        StringBuilder strClass = new StringBuilder();
        if (dt != null)
        {
            strClass.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                strClass.Append("{");
                strClass.Append("\"ID\":\"" + dt.Rows[i]["id"].ToString() + "\",");
                strClass.Append("\"Cname\":\"" + dt.Rows[i]["classCname"].ToString() + "\"");

                if (i != dt.Rows.Count - 1)
                {
                    strClass.Append("},");
                }
            }

        }
        strClass.Append("}");
        strClass.Append("]");      
        context.Response.ContentType = "application/JSon";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strClass.ToString());
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

注意：

//後台只能獲取value值，不能直接獲取text，需要通過JS、控件中轉  
       //結果：275 276 277 
       Label1.Text = Request.Form[ddl1.UniqueID] + " " 

                   + Request.Form["ddl2"] + " " 

                   + Request.Form[ddl3.ClIEntID.Replace("_", "$")] ;

遇到的問題：

下拉框text的值通過HiddenFIEld控件中轉

  <asp:HiddenField ID="HiddenField1" runat="server" />
  <asp:HiddenField ID="HiddenFIEld2" runat="server" />
  <ASP:HiddenField ID="HiddenFIEld3" runat="server" /> 

 

把選中下拉框的值賦予隱藏控件中： 

<script type="text/Javascript">       
        var Key1 = $("#ddl1>option:selected").val();
        $('#HiddenField1').val(Key1);
        var Key2 = $("#ddl2>option:selected").val();
        $('#HiddenField2').val(Key2);
        var Key3 = $("#ddl3>option:selected").val();
        $('#HiddenFIEld3').val(Key3);    
   </script>

選擇下拉框後 動態賦值到HiddenFIEld 控件中的值 無法與下拉框選中的值相對應！