日期:2014-05-17  浏览次数:20482 次

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


上图中,怎么样用jquery实现点击文本框后弹出下面的港口选择的列表,供用户选择,将用户选择的结果填入文本框后自动关闭。

  
  在网上找了很多代码,都不好用

------解决方案--------------------
HTML code
<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>