代码改变世界

带下拉列表的TextBox

2018-03-24 11:27  若藜520  阅读(399)  评论(0)  编辑  收藏  举报 
<!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" onmouseover="setOnlist(this);" onclick="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