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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(转)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值,进行后台的查询字段。







以上是关于(转)Jquery+Ajax实现Select动态定数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。?

ajax异步提交数据动态更改select选项

jQuery Mobile 如何通过ajax方式动态加载页面?

Jquery 动态添加option 并给option添加数据,并帮定事件

使用jquery的ajax方法获取下拉列表值

触碰jQuery:AJAX异步详解(转)