jquery 中如何实现点击文本框弹出列表信息选择

  上图中，怎么样用jquery实现点击文本框后弹出下面的港口选择的列表，供用户选择，将用户选择的结果填入文本框后自动关闭。  
   在网上找了很多代码，都不好用

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jQuery-ui-1.8.18.custom/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script>
            window.onload = function () {
                $("#i").click(function () {
                    var div = $("#ii");
                    var divoffset = $(this).offset();
                    div.attr("style", "position:absolute;display:block;");
                    div.css({ left: divoffset.left,top: divoffset.top+$(this).height()+5})
                })
            }
            function closediv() { var div = $("#ii"); div.hide() }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        xxxxxxxx
        <input id="i" />
        <div id="ii" style="display: none" >
            asdfasas
            <span onclick="closediv()">关闭</span>
        </div>
        </form>
    </body>
    </html>给楼主写了个例子