文本框在智能提示后选择一个值联动下拉框

1、Body部分

 1 <body>
 2     <form id="form1" runat="server">
 3     <div style="margin-left:450px">
 4       文本框：<input type="text" id="TextValues" onchange=" SelectSemesterBySchYear()"  onkeyup="SelectTip()" style="150px"  runat="server"/>
 5        &nbsp; &nbsp;
 6       
 7       下拉框：<select id="ddlValue2" runat="server" disabled="disabled"  style="150px">
 8                <option  value="">--请选择--</option>
 9               </select><br /> 
10       <div id="divtxtSelect" class="div_01"></div>
11       
12     </div>
13     </form>
14 </body>

2、JQuery部分

 1  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>  
 2      <script type="text/javascript">
 3         $(document).ready(function () {
 4             $("li").live("click", function () {
 5 
 6                 $("#TextValues").val($(this).text());
 7                 
 8                 $("#divtxtSelect").html("");
 9             })
10 
11             $("li").live({
12                 mouseenter: function () {
13                     $(this).css("background-color", "gray"); //鼠标移入事件  
14                 },
15                 mouseleave: function () {
16                     $(this).css("background-color", "white"); //鼠标移出事件  
17                 }
18             });
19         });
20 
21         //Ajax请求智能搜索提示  
22         function SelectTip() {
23             var temp = $("#TextValues").val();
24             if (temp == "" || temp == null) {
25                 $(divtxtSelect).html("");
26             }
27             else {
28                 $(".div_01").css("display", "block");
29                 $.ajax({
30                     type: "post",
31                     url: "MusicHandler.ashx?methodType=code",
32                     data: { code: temp, methodType: "code" },
33                     success: function (result) {
34                         $(divtxtSelect).html("");
35                         $(divtxtSelect).html(result);
36                     },
37                     //请求执行异常执行的方法  
38                     error: function (XMLHttpRequest, textStatus, errorThrown) {
39                         //alert(XMLHttpRequest.status);
40                         $(divtxtSelect).html("");
41                         $(divtxtSelect).html("<lable color='red'>异常，请关闭页面重试，或联系管理员</lable>");
42                     }
43                 });
44             }
45         }
46 
47         //Ajax請求 文本框聯動給下拉框獲取值
48         function SelectSemesterBySchYear() {
49             var temp1 = $("#TextValues").val();
50             $.ajax({
51                 type: "get",
52                 url: "SelectHandler.ashx?city=" + temp1,
53                 success: function (strJson) {
54                     var dataArray = eval(strJson);
55                     $("#ddlValue2").empty();//清空以前的下拉框的值
56                     $("#ddlValue2").prop("disabled", false);//让下拉框能用      
57                     for (var i = 0; i < dataArray.length; i++) {
58                         $("#ddlValue2").append("<option value='" + dataArray[i].id + "'>" + dataArray[i].Information + "</option>");
59                     }
60                 },
61                 error: function (XmlHttpRequest, textStatus, errorThrown) {
62                     alert(XmlHttpRequest.responseText);
63                 }
64             });
65         }
66 
67      </script>

3、Style 部分

 1 <style type="text/css">  
 2         li {  
 3             text-decoration: none;  
 4             display: block;                      
 5             list-style: none;  
 6             cursor: pointer;  
 7             padding: 0px;  
 8             margin: 0px;  
 9         }  
10   
11         ul {            
12             display: block;  
13             list-style: none;  
14             margin: 0px;  
15             padding: 0px;  
16         }  
17         
18         .div_01{
19             display:none;
20             150px;
21             height:100px;
22             margin-left:75px;
23             background-color:white;
24             }
25     </style>

4、SelectHandler.ashx 一般处理程序页面

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Data;
 6 using System.Text;
 7 using System.Web.Script.Services;
 8 using System.Web.Services;
 9 
10 namespace Combobox
11 {
12     /// <summary>
13     /// SelectHandler 的摘要说明
14     /// </summary>
15     public class SelectHandler : IHttpHandler
16     {
17 
18         public void ProcessRequest(HttpContext context)
19         {
20             context.Response.ContentType = "text/plain";
21             //context.Response.Write("Hello World");
22             string city = context.Request["city"].ToString();
23             string sql = "select * from MusicInfo_Info where names like '%" + city + "%'";    
24             DataTable dt = DbHelper.Instance.CreateDataTable(CommandType.Text, sql);
25             string strJson = DataTableToJson("SemesterJson", dt);
26             context.Response.Write(strJson);
27             context.Response.End();  
28         }
29 
30         public bool IsReusable
31         {
32             get
33             {
34                 return false;
35             }
36         }
37 
38         //将datatable数据转换成JSON数据的方法  
39         public string DataTableToJson(string jsonName, DataTable dt)
40         {
41 
42             StringBuilder Json = new StringBuilder();
43             Json.Append("[");
44             if (dt.Rows.Count > 0)
45             {
46                 for (int i = 0; i < dt.Rows.Count; i++)
47                 {
48                     Json.Append("{");
49                     for (int j = 0; j < dt.Columns.Count; j++)
50                     {
51                         Json.Append(dt.Columns[j].ColumnName.ToString() + ":"" + dt.Rows[i][j].ToString() + """);
52                         if (j < dt.Columns.Count - 1)
53                         {
54                             Json.Append(",");
55                         }
56                     }
57                     Json.Append("}");
58                     if (i < dt.Rows.Count - 1)
59                     {
60                         Json.Append(",");
61                     }
62                 }
63             }
64             Json.Append("]");
65             return Json.ToString();
66         }  
67     }
68 }