<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"> <title>1223</title> <script src="JsTree/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> var data = [{ ShippingMethod: '快10', ArrivalDays: 10 }, { ShippingMethod: '中20', ArrivalDays: 20 }, { ShippingMethod: '慢40', ArrivalDays: 40}] function ShowData() { var html = ' <div style="display:Block"> '; var search = $.trim($("#txtShippingMode").val()); for (var i = 0; i < data.length; i++) { html += ' <div class="list notonList" οnmοuseοver="setOnlist(this);" οnclick="CheckIt(\'' + data[i].ShippingMethod + '\',' + data[i].ArrivalDays + ');"' + '" >' + data[i].ShippingMethod + '</div>'; } html += ' </div>'; $("#SerachContent").html(html); ContentBox2show(); } function ContentBox2show() { var A_top = $("#txtShippingMode").offset().top + $("#txtShippingMode").outerHeight(true) + 10; // 1 var A_left = $("#txtShippingMode").offset().left; $("#ContentBox2").show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); } function setOnlist(o) { $(".list").removeClass("onList"); $(o).addClass("onList"); } function CheckIt(Skey, SValue) { $("#txtShippingMode").val(Skey); } //通过点击位置,判断弹出的显示 $(document).mouseup(function (event) { //如果是点击textbook则显示下拉列表,其他位置隐藏 if (event.target == $("#txtShippingMode").get(0)) { ShowData(); } else { $("#ContentBox2").hide(); } }); </script> <style type ="text/css" > .list { padding: 0px 10px; height: 28px; line-height: 28px; overflow: hidden; } .notonList { background-color: White; } .onList { background-color: #2577E3; } </style> </head> <body> <form name="frmObj" runat="server" id="frmObj"> <div> <asp:TextBox ID="txtShippingMode" runat="server" MaxLength="100" Width="120px"></asp:TextBox> <div id="ContentBox2" style="display: none; background-color: rgb(255, 255, 255); z-index: 980; position: absolute; top: 120px; width: 100px;"> <div id="SerachContent" style="width: 125px; border: 1px solid #ddd; padding: 0px 0px; margin-top: -12px;"> </div> </div> </div> </form> </body> </html>
下拉列表数据可以根据自己的情况用隐藏控件或者ajax从后台获取
另一个带下拉列表的TextBox例子 http://www.codesky.net/article/201004/100753.html