<!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

带下拉列表的TextBox的更多相关文章

  1. [WPF]带下拉列表的文本框

    控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...

  2. WPF 实现带标题的TextBox

    这篇博客将分享在WPF中如何创建一个带Title的TextBox.首先请看一下最终的效果, 实现思路:使用TextBlock+TextBox来实现,TextBlock用来显示Title. 实现代码, ...

  3. 带清空按钮TextBox的实现(WPF)

    本博文针对人群:WPF新手.博文内容:通过Style制定包含清空Button的TextBox样式模板,通过在Style中引入自定义类的附加属性完成对TextBox的内容清空. <span sty ...

  4. WPF中带水印的Textbox

    很多时候我们都希望通过水印来告诉用户这里该填什么样格式的数据,那么我们就希望有这样的一个控件. 为了方便起见,先定义一个依赖属性专门来存放水印中显示的字符串. public sealed class ...

  5. C# Winfrom 自定义控件——带图片的TextBox

    效果: 描述: 本来是想用GDI在左边画图片上去的,文本是居中对齐,如果文本是左对齐,文本会把图片遮住控件长这样: 但这样做,输入框在获取焦点时候,会把图片挡住就像这样: 输入完成之后图片就会显示完整 ...

  6. jquery带下拉列表的购物车组件封装

    按照国际惯例先放效果图 安静的时候它长这样 等待加载时它长这样(功能是设置的按需加载,网速慢或者加载数据大时会出现) 加载之后购物车没有商品时这样 有商品长这样 接下来放代码: cart.html & ...

  7. 用js写的极简的导航菜单，带下拉列表

    太简单了,不多说,但是自己还是写了一会,因为总会出现这样那样小的错误,毕境最近在复习和学习一些前台,欢迎看到的各位能给点改进意见或者其它的,Thank you! 首先是发图,只用CSS写了结构,几乎没 ...

  8. 自定义控件之带水印的Textbox

    代码地址: http://download.csdn.net/detail/u010312811/9553195 Windows消息处理: http://www.cnblogs.com/imstriv ...

  9. [Umbraco] Data Types介绍

    Data Types是在建立document type时需要用到的,系统自带了很多用于开发的类型,如常用的下拉列表dropdown, textbox, radiobox, checkbox以及上传,h ...

随机推荐

  1. 读《Spring源码深度解析》途中问题1

    step 1:检查自己的eclipse版本:在help->About Eclipse中查看: step 2:进入 https://github.com/groovy/groovy-eclipse ...

  2. [No0000149]ReSharper操作指南6/16-编码协助之其他协助

    语法高亮 ReSharper扩展了默认Visual Studio的符号高亮显示.此外,它还会使用可配置的颜色突出显示字段,局部变量,类型和其他标识符.例如,ReSharper语法突出显示允许您轻松区分 ...

  3. [No0000E5]C# 运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C# 有丰富的内置运算符,分类如下: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 算术运算符 运算符:A=10,B=20 ...

  4. RabbitMQ下的生产消费者模式与订阅发布模式

    所谓模式,就是在某种场景下,一类问题及其解决方案的总结归纳.生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式,用于功能解耦和分布式系统间的消息通信,以下面两种场景为例: 数据接入   假设 ...

  5. 使用shell删除目录下几天前生成文件方法

    find /dbfdumpdir/*full* -mtime +21 -exec rm -rf {} \; 这个shell可以删除目录/dbfdumpdir下面21天前生成的,文件名包含full的文件 ...

  6. 交叉编译qxmpp cmake格式工程

    编写Toolchain-aarch64.cmake文件,内容如下: # this is required SET(CMAKE_SYSTEM_NAME Linux) # 必须 set(CMAKE_SYS ...

  7. nginx-upstream-bio/nio/netty-zuul2-apigateway-openresty-orange-lua-docker

    upstream_addr等到走了一些弯路,才发现nginx的upstream本来就有一个upstream_addr的模块,一下子我觉得找到了方向,不过看这个变量的说明,发现它主要用在记录log上面, ...

  8. Page3：组合系统状态空间输入输出描述、矩阵指数函数性质[Linear System Theory]

    内容包含组合系统的状态空间描述以及输入输出描述,零输入响应的概念以及矩阵指数函数的性质

  9. [math] 绘制空间几何体的直观图

    这么多年,一直凭着从天而降的神来之灵感画着立体图. 而今才知道在二维平面上绘制空间几何体的直观图也是有方法的.叫做“画法几何” 1. 斜二测图 就是倾斜y轴,使y轴与x轴成45度的夹角.见: http ...

  10. spark Pair RDD 基础操作

    下面是Pair RDD的API讲解 转化操作 reduceByKey:合并具有相同键的值: groupByKey:对具有相同键的值进行分组: keys:返回一个仅包含键值的RDD: values:返回 ...