Div下拉式菜单选择项


asp.net 做的一个下拉选择项

前台代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Spyjview.ascx.cs" Inherits="hkpro.Choose.portal.Spyjview1" %>

<style>

    li{list-style-type:none;}

    a:link {

        font-size: 12px;

        color: #000000;

        text-decoration: none;

    }

    a:visited {

        font-size: 12px;

        color: #000000;

        text-decoration: none;

    }

    a:hover {

        font-size: 12px;

        color: #999999;

        text-decoration: underline;

    }

    #yjImg {

        width: 0px;

        height: 0px;

        overflow:hidden;

        border-top: 5px solid black;

        border-right: 5px solid transparent;

        border-left: 5px solid transparent;

        border-bottom: 5px solid transparent;

    }

</style>

<script src="../../easyui/jquery.min.js"></script>

<script >

    $<%=this.Spyjview%> = $(document);

    $(document).ready(function () {

        $("#div_yj").click(function (e) { e.stopPropagation(); });

        var yjL = $("#div_yj");

        $(document).click(function () {

            if (yjL.is(':visible')) {

                yjL.hide();

            }

        })

        $("#yjImg").click(function (e) {

            e.stopPropagation();

            if (!yjL.is(':visible')) {

                var x=e.clientX;

                var y=e.clientY;

                var winW = $(window).innerWidth();

                var winH = $(window).innerHeight();

                var yjlW=yjL.width();

                var yjlH=yjL.height();

                if (x + yjlW > winW) {

                    x = winW - yjlW;

                }

                if (y + yjlH > winH) {

                    y = winH - yjlH;

                }

                yjL.css("left",  x+ "px");

                yjL.css("top",  y+ "px");

                yjL.show();

            }

        })

        yjL.find("li").click(function (e) {

           // $('#<%=this.TagetId%>').val(this.innerText);

           // 点击选择项的事件

            $<%=this.Spyjview%>.trigger("onSelected", [this.innerText, function () { }]);

            yjL.hide();

        })

    })

</script>

<img src="#" id="yjImg" alt="选择系统提供的审批意见" />

<div id="div_yj" style="width:100px; height:0px; line-height:25px; position:absolute;float:initial;display:none;">

    <ul runat="server" id="yjList" style="padding:0; padding-left:25px; margin:0; text-align:left; background:#DDD;">

    </ul>

</div>

后台代码，初始化ul内部内容

            DataTable dt= SqlHelper.ExecuteDt(strSql);

            string innerHtml="";

            foreach (DataRow dr in dt.Rows)

            {

                innerHtml += string.Format("<li><a href='javascript:void'>{0}</a></li>", dr[0]);

            }

            yjList.InnerHtml = innerHtml;