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;
        }
    }