解决思路:
在数据库中建立类型字典式表。将下拉框需要添加的项,在数据库表里中文、英文名称对应起来。
下拉框动态绑定数据库表中需要字段。
- <div id="bgDiv" style="display:none;"></div>
- <a class="btn-lit" href="javascript:" onclick="bgDiv.style.display=‘inline‘;advancedQuery.style.display=‘‘;addItems()"><span>高级查询</span></a>
在高级查询单击事件中,除了显示查询框外,添加下拉框绑定字段的函数。此处为addItems().
实现代码:
- <script type="text/javascript">
- function addItems() {
- $.ajax({
- url: "addItem.ashx/GetItem",
- type: "post",
- dataType: "json",
- contentType: "application/json",
- traditional: true,
- success: function (data) {
- for (var i in data) {
- var jsonObj =data[i];
- var optionstring = "";
- for (var j = 0; j < jsonObj.length; j++) {
- optionstring += "<option value=\"" + jsonObj[j].ID + "\" >" + jsonObj[j].chinesename + "</option>";
- }
- $("#dpdField1").html("<option value=‘请选择‘>请选择...</option> "+optionstring);
- }
- },
- error: function (msg) {
- alert("出错了!");
- }
- });
- };
-
- </script>
后台代码:
- public void ProcessRequest(HttpContext context)
- {
-
-
- GetItem(context);
- }
- public void GetItem(HttpContext context)
- {
- string ReturnValue = string.Empty;
- BasicInformationFacade basicInformationFacade = new BasicInformationFacade();
- DataTable dt = new DataTable();
- dt = basicInformationFacade.itemsQuery();
- ReturnValue = DataTableJson(dt);
- context.Response.ContentType = "text/plain";
- context.Response.Write(ReturnValue);
-
- }
- #region dataTable转换成Json格式
-
-
-
-
-
- public string DataTableJson(DataTable dt)
- {
- StringBuilder jsonBuilder = new StringBuilder();
- jsonBuilder.Append("{\"");
- jsonBuilder.Append(dt.TableName.ToString());
- jsonBuilder.Append("\":[");
- for (int i = 0; i < dt.Rows.Count; i++)
- {
- jsonBuilder.Append("{");
- for (int j = 0; j < dt.Columns.Count; j++)
- {
- jsonBuilder.Append("\"");
- jsonBuilder.Append(dt.Columns[j].ColumnName);
- jsonBuilder.Append("\":\"");
- jsonBuilder.Append(dt.Rows[i][j].ToString());
- jsonBuilder.Append("\",");
- }
- jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
- jsonBuilder.Append("},");
- }
- jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
- jsonBuilder.Append("]");
- jsonBuilder.Append("}");
- return jsonBuilder.ToString();
- }
- #endregion
利用Ajax、json给前台页面中的select绑定数据源。后台通过两个函数,分别获得数据库表的数据,将数据转为Json格式返回给前台。前台在接收数据后,将数据进行解析,获得下拉框中需要绑定的字段。在绑定时,下拉框的每一项都分别绑定一个文本、value值。文本用于显示,供用户选择。value值,是用户选择了某个字段,取得这个字段的value值,进行后台的查询字段。
(转)Jquery+Ajax实现Select动态定数据
原文:http://www.cnblogs.com/nzgbk/p/6099402.html