div跟随被点击控件的位置，div代替下拉列表框（基于jquery）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
<link type="text/css" rel="stylesheet" href="style/base.css" />
<link type="text/css" rel="stylesheet" href="style/register.css" />

<script type="text/javascript" src="js/jquery-1.4.4.min.js" >
</script>

<script type="text/javascript" >
$(document).ready(
function(){
        Prepare();
});

    function Prepare()
    {
         $("#regionselector").click(
          function(){
          ShowRegion();
          return false;
          });

          $("#regionblock a").click(
            function()
            {
                SelectThis($(this).attr("region"));
                return false;
            }
          );

          $("#regionblock").click(
          function(){
          return false;
          });

          $(document).click(
            function()
            {
                HideRegion();
            }
          );
    }

    function ShowRegion()
    {
        var objPostition = $("#regionselector").offset();
        $("#regionblock").css({"display":"block"});
        $("#regionblock").offset({ left: objPostition.left, top: objPostition.top + $("#regionselector").innerHeight() });
    }

    function HideRegion()
    {
        $("#regionblock").css({"display":"none"});
    }

    function SelectingRegion()
    {
        ShowRegion();
    }

    function SelectThis(strRegion)
    {
        $("#regionselector").html(strRegion);
        $("#hfRegion").val(strRegion);
        HideRegion();
    }

</script>

<style type="text/css" >
    #regionblock
    {
        display:none;
        position:absolute;
        width:300px;
        height:300px;
        border:1px solid #c8c8c8;
        background-color:#fff;
        padding:20px;
    }

    #regionblock a
    {
        font-family:'宋体';
        font-size:12px;
        font-weight:bold;
        text-decoration:none;
        color:#000;
    }

    #regionblock a:hover
    {
        text-decoration:underline;
    }

    #regionselector
    {
        display:inline;
        width:400px;
        height:100px;
        padding:5px 20px;
        border:1px solid #c8c8c8;
        cursor:hand;
    }

</style>

</head>

<body>
<form action="" method="post">
<div id="regionblock" >
    <table>
        <tr>
            <td width="100">
                <a href="#" region="--籍贯--" >--籍贯--</a>
            </td>
            <td width="100">
                <a href="#" region="北京市" >北京市</a>
            </td>
            <td width="100">
                <a href="#" region="天津市"  >天津市</a>
            </td>
            <td width="100">
                <a href="#" region="上海市"  >上海市</a>
            </td>
        </tr>

        <tr>
            <td>
                <a href="#" region="重庆市"  >重庆市</a>
            </td>
            <td>
                <a href="#"  region="河北省" >河北省</a>
            </td>
            <td>
                <a href="#" region="内蒙古自治区"  >内蒙古自治区</a>
            </td>
            <td>
                <a href="#" region="东三省"  >东三省</a>
            </td>
        </tr>
    </table>
</div>
<div id="content">
    <div id="top">
        <div id="topL"></div>
        <div id="topR">

        </div>
        <div id="nav" class="clear">

        <div class="clear"></div>
        </div>
    </div>
    <div class="sameBorder">
        <div class="sameTop"></div>
        <div class="samePadding">
        <table>
            <tr>
                <td></td>
                <td>
                <div id="regionselector" >
                    --籍贯--
                </div>
                <input type="hidden" id="hfRegion" name="hfRegion" value="--籍贯--" />
                </td>
            </tr>

        </table>
        </div>

    </div>
    <div id="footer">
    </div>
</div>
</form>
</body>
</html>

posted on 2011-08-25 13:57  冰危节奏  阅读(990)  评论(0)    收藏  举报

导航