html input select下拉菜單綁定后台數據庫數據，實現動態拼接

1.前台頁面，我這里需要綁定三個下拉菜單

<select id="select_modelid">
</select>

<select id="select_machineid">
    </select>
<select id="select_rawmaterial">
</select>

 

2.Jquery代碼

function init() {//綁定下拉菜單數據
    $.ajax({
        type: "post",
        url: "../Handler.ashx?action=init",
        data: {},
        success: function (result) {
            var arr = result.split('@');//分割三組數據 var result_modelid = eval(arr[0]);
            var result_machineid = eval(arr[1]);
            var result_rawmaterial = eval(arr[2]);
            $("#select_modelid").html(""); //綁定模號下拉菜單
            $("#select_modelid").append($("<option value=\"0\">－請選擇模號－</option>"));
            for (var i = 0; i < result_modelid.length; i++) {
                $("#select_modelid").append($("<option value=\"" + result_modelid[i].ModelId + "\">" + result_modelid[i].ModelId + "</option>"));
            }
            $("#select_machineid").html(""); //綁定機台下拉菜單
            $("#select_machineid").append($("<option value=\"0\">－請選擇機台－</option>"));
            for (var i = 0; i < result_machineid.length; i++) {
                $("#select_machineid").append($("<option value=\"" + result_machineid[i].MachineId + "\">" + result_machineid[i].MachineId + "</option>"));
            }
            $("#select_rawmaterial").html(""); //綁定原料下拉菜單
            $("#select_rawmaterial").append($("<option value=\"0\">－請選擇原料－</option>"));
            for (var i = 0; i < result_rawmaterial.length; i++) {
                $("#select_rawmaterial").append($("<option value=\"" + result_rawmaterial[i].RawMaterial + "\">" + result_rawmaterial[i].RawMaterial + "</option>"));
            }
        }
    });

3.后台ajax方法 需要引入Newtonsoft.Json.dll     用來將數據變成Json格式數據

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string strAction = context.Request.QueryString["action"];
        switch (strAction)
        {
            case "init":
                init(context);
                break;
  //          case "query":
    //            query(context);
      //          break;
        }

        //DB db = new DB();
        //DataTable dt = db.reDt("select userid,username,password,role from userInfo");
        //string result = JsonConvert.SerializeObject(dt, new DataTableConverter());
        //string rs = JsonConvert.DeserializeObject();
        //context.Response.Write(result);
        context.Response.End();
    }
  
   
    private void init(HttpContext context)
    {
        DB db = new DB();
        DataTable dt1 = db.reDt("select ModelId from ModelInfo order by ModelId");//獲取模號
        string strResult1 = JsonConvert.SerializeObject(dt1, new DataTableConverter());

        DataTable dt2 = db.reDt("select MachineId from MachineInfo order by MachineId");//獲取機台號
        string strResult2 = JsonConvert.SerializeObject(dt2, new DataTableConverter());

        DataTable dt3 = db.reDt("select RawMaterial from RawInfo order by RawMaterial");//獲取原料
        string strResult3 = JsonConvert.SerializeObject(dt3, new DataTableConverter());

        string result = strResult1 + "@" + strResult2 + "@" + strResult3;
        context.Response.Write(result);
    }
   

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }