（转）Jquery+Ajax实现Select动态定数据

Posted 2020-08-20

解决思路：

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

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

 

[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异步详解（转）