• (转)Jquery+Ajax实现Select动态定数据


    解决思路:

    在数据库中建立类型字典式表。将下拉框需要添加的项,在数据库表里中文、英文名称对应起来。

    下拉框动态绑定数据库表中需要字段。

    [csharp] view plain copy
     
    1. <div id="bgDiv" style="display:none;"></div>  
    2.                 <a  class="btn-lit" href="javascript:"  onclick="bgDiv.style.display='inline';advancedQuery.style.display='';addItems()"><span>高级查询</span></a>  


    在高级查询单击事件中,除了显示查询框外,添加下拉框绑定字段的函数。此处为addItems().

    实现代码:

    [javascript] view plain copy
     
    1. <script type="text/javascript">  
    2. //动态绑定下拉框项  
    3.         function addItems() {  
    4.             $.ajax({  
    5.                 url: "addItem.ashx/GetItem",    //后台webservice里的方法名称  
    6.                 type: "post",  
    7.                 dataType: "json",  
    8.                 contentType: "application/json",  
    9.                 traditional: true,  
    10.                 success: function (data) {  
    11.                     for (var i in data) {  
    12.                         var jsonObj =data[i];  
    13.                         var optionstring = "";  
    14.                         for (var j = 0; j < jsonObj.length; j++) {  
    15.                             optionstring += "<option value="" + jsonObj[j].ID + "" >" + jsonObj[j].chinesename + "</option>";  
    16.                         }  
    17.                         $("#dpdField1").html("<option value='请选择'>请选择...</option> "+optionstring);  
    18.                     }  
    19.                 },  
    20.                 error: function (msg) {  
    21.                     alert("出错了!");  
    22.                 }  
    23.             });            
    24.         };  
    25.          
    26.     </script>   


    后台代码:

    [csharp] view plain copy
     
    1. public void ProcessRequest(HttpContext context)  
    2.        {  
    3.            //context.Response.ContentType = "text/plain";  
    4.            //context.Response.Write("Hello World");  
    5.            GetItem(context);  
    6.        }  
    7.        public void GetItem(HttpContext context)  
    8.        {  
    9.            string ReturnValue = string.Empty;  
    10.            BasicInformationFacade basicInformationFacade = new BasicInformationFacade();   //实例化基础信息外观  
    11.            DataTable dt = new DataTable();  
    12.            dt = basicInformationFacade.itemsQuery(); //根据查询条件获取结果  
    13.            ReturnValue = DataTableJson(dt);  
    14.            context.Response.ContentType = "text/plain";  
    15.            context.Response.Write(ReturnValue);  
    16.            //return ReturnValue;  
    17.        }  
    [csharp] view plain copy
     
    1. #region dataTable转换成Json格式  
    2.         /// <summary>       
    3.         /// dataTable转换成Json格式       
    4.         /// </summary>       
    5.         /// <param name="dt"></param>       
    6.         /// <returns></returns>       
    7.         public string DataTableJson(DataTable dt)  
    8.         {  
    9.             StringBuilder jsonBuilder = new StringBuilder();  
    10.             jsonBuilder.Append("{"");  
    11.             jsonBuilder.Append(dt.TableName.ToString());  
    12.             jsonBuilder.Append("":[");  
    13.             for (int i = 0; i < dt.Rows.Count; i++)  
    14.             {  
    15.                 jsonBuilder.Append("{");  
    16.                 for (int j = 0; j < dt.Columns.Count; j++)  
    17.                 {  
    18.                     jsonBuilder.Append(""");  
    19.                     jsonBuilder.Append(dt.Columns[j].ColumnName);  
    20.                     jsonBuilder.Append("":"");  
    21.                     jsonBuilder.Append(dt.Rows[i][j].ToString());  
    22.                     jsonBuilder.Append("",");  
    23.                 }  
    24.                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
    25.                 jsonBuilder.Append("},");  
    26.             }  
    27.             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
    28.             jsonBuilder.Append("]");  
    29.             jsonBuilder.Append("}");  
    30.             return jsonBuilder.ToString();  
    31.         }  
    32. #endregion  

    利用Ajax、json给前台页面中的select绑定数据源。后台通过两个函数,分别获得数据库表的数据,将数据转为Json格式返回给前台。前台在接收数据后,将数据进行解析,获得下拉框中需要绑定的字段。在绑定时,下拉框的每一项都分别绑定一个文本、value值。文本用于显示,供用户选择。value值,是用户选择了某个字段,取得这个字段的value值,进行后台的查询字段。

  • 相关阅读:
    难以理解的二分查找
    程序设计第七次作业——关于计算器的总结
    程序设计第六次作业——计算器(可视化界面)
    课堂作业——1025反转链表
    程序设计第五次作业——计算器(调用文件输入输出)
    circle area
    程序设计第四次作业——计算器第二步(计算)
    第三次作业代码规范修改
    解决Type 'UnityEngine.Component' does not support slicing
    mactype支持qq浏览器
  • 原文地址:https://www.cnblogs.com/nzgbk/p/6099402.html
走看看 - 开发者的网上家园