使用linq.js操作后台JSON数据到前台select标签

后台JSON数据生成

using System.Web.Services;//要应用这个空间

[WebMethod]
        public static string Textjson()
        {
            string sql = "SELECT simid,country,days,simcontent,simprice from simshop";
            DataTable dtsim = SqlHelper.ExecuteQuery(sql);
            string data= ToJson(dtsim);
            
            return data;
        }

 Datatable转换为Json

public static string ToJson(DataTable dt)
        {
            StringBuilder jsonString = new StringBuilder();
            jsonString.Append("[");
            DataRowCollection drc = dt.Rows;
            for (int i = 0; i < drc.Count; i++)
            {
                jsonString.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    string strKey = dt.Columns[j].ColumnName;
                    string strValue = drc[i][j].ToString();
                    Type type = dt.Columns[j].DataType;
                    jsonString.Append("\"" + strKey + "\":");
                    strValue = String.Format(strValue, type);
                    if (j < dt.Columns.Count - 1)
                    {
                        jsonString.Append(strValue + ",");
                    }
                    else
                    {
                        jsonString.Append(strValue);
                    }
                }
                jsonString.Append("},");
            }
            jsonString.Remove(jsonString.Length - 1, 1);
            jsonString.Append("]");
            return jsonString.ToString();
        }

前台联动js

要引用这两个js

<script src="../js/jquery.linq.min.js"></script>
    <script src="../js/json2.js"></script>

    <%--套餐联动--%>
    <script type="text/javascript">
        function textjson() {
            $.ajax({
                type: "Post",
                url: "tcorder.aspx/Textjson",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //data: "",//传输过去为空，这里可以注释掉
                success: function (data) {

                    //从后台获取的JSON建议放在页面的隐藏域hjson里
                    $("#hJson").val(data.d);
                    var aa = eval("(" + data.d + ")");   

                    //从aa里选择出country字段，去重，toobject,也可以toarray、tojson,可以参考相关技术文件
                    var json = $.Enumerable.From(aa).Distinct("$.country").Select("$.country").ToObject();

                     $('#s1').empty();
                    $.each(json, function (index, content) {
                        $("#s1").append("<option value='" + content + "'>" + content + "</option>");
                    });
                    Change2();

                },
                error: function (e) {
                    alert(e.message);
                }
            });
        }

         function Change2() {
            var c = $("#s1").val();
            var aa = eval("(" + $("#hJson").val() + ")");
            $("#s2").empty();
            $.each($.Enumerable.From(aa).Where("$.country=='" + c + "'").Select("$").ToArray(), function (index, content) {
                $("#s2").append("<option value='" + content.days + "'>" + content.days + "</option>");
            });
           // Change3();之后可以继续下一个change，注意content的取值，要和JSON串里的字段名称对应
        }

。。。。。。

</script>

HTML页面

<input type="hidden" id="hJson" />

 <div id="frm">
        <asp:Label ID="lbcountry" runat="server" Text="国家或地区："></asp:Label>
                 <select id="s1" name="s1" onchange="Change2()">
                         <option></option>
                    </select>
         <asp:Label ID="lbdays" runat="server" Text="套餐天数："></asp:Label>
                  <select id="s2" name="s2" onchange="Change3()">
                          <option></option>
                    </select><br />
        <asp:Label ID="lbcontent" runat="server" Text="套 餐 内 容："></asp:Label>
                    <select id="s3" name="s3" onchange="Change4()">
                              <option></option>
                      </select><br />
        <asp:Label ID="lbprice" runat="server" Text="充值参加价："></asp:Label>
                      <select id="s4" name="s4" onchange="Change5()">
                                <option></option>
                       </select><a>RMB</a>
                      <select id="s5" style="visibility: hidden;" name="s5">
                     <option></option>
                        </select>
 </div>